@atlure/ui 0.2.0 → 0.4.0

package/src/components/search-bar/hooks/use-debounced-callback.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export interface DebouncedCallback<TValue> {
+  schedule: (value: TValue) => void;
+  flush: (value: TValue) => void;
+}
+
+export function useDebouncedCallback<TValue>(
+  callback: ((value: TValue) => void) | undefined,
+  delayMs: number,
+): DebouncedCallback<TValue> {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const latestCallbackRef = useRef(callback);
+
+  useEffect(() => {
+    latestCallbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+  const schedule = useCallback(
+    (value: TValue) => {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => latestCallbackRef.current?.(value), delayMs);
+    },
+    [delayMs],
+  );
+
+  const flush = useCallback((value: TValue) => {
+    clearTimeout(timeoutRef.current);
+    latestCallbackRef.current?.(value);
+  }, []);
+
+  return { schedule, flush };
+}

package/src/components/search-bar/search-bar.tsx

@@ -0,0 +1,60 @@
+import { iconSize, Search, X } from "@atlure/icons";
+import { Pressable } from "react-native";
+
+import { touchTargetHitSlop } from "../../lib/touch-target";
+import { searchBarIconClassName } from "../../variants/search-bar-variants";
+import { Input, type InputProps } from "../input/input";
+import { useDebouncedCallback } from "./hooks/use-debounced-callback";
+
+export interface SearchBarProps
+  extends Omit<InputProps, "leadingIcon" | "trailingIcon" | "isMultiline" | "value"> {
+  value: string;
+  onChangeText: (value: string) => void;
+  onChangeDebounced?: (value: string) => void;
+  debounceMs?: number;
+  clearAccessibilityLabel: string;
+}
+
+export function SearchBar({
+  value,
+  onChangeText,
+  onChangeDebounced,
+  debounceMs = 300,
+  clearAccessibilityLabel,
+  ...inputProps
+}: SearchBarProps) {
+  const { schedule, flush } = useDebouncedCallback(onChangeDebounced, debounceMs);
+
+  const handleChangeText = (nextValue: string) => {
+    onChangeText(nextValue);
+    schedule(nextValue);
+  };
+
+  const handleClear = () => {
+    onChangeText("");
+    flush("");
+  };
+
+  return (
+    <Input
+      value={value}
+      onChangeText={handleChangeText}
+      returnKeyType="search"
+      clearButtonMode="never"
+      leadingIcon={<Search size={iconSize.md} className={searchBarIconClassName} />}
+      trailingIcon={
+        value.length > 0 ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={clearAccessibilityLabel}
+            hitSlop={touchTargetHitSlop("icon")}
+            onPress={handleClear}
+          >
+            <X size={iconSize.md} className={searchBarIconClassName} />
+          </Pressable>
+        ) : undefined
+      }
+      {...inputProps}
+    />
+  );
+}

package/src/components/separator/separator.tsx

@@ -1,3 +1,4 @@
+import type { ComponentRef, Ref } from "react";
 import { View, type ViewProps } from "react-native";
 
 import { cn } from "../../lib/cn";
@@ -6,6 +7,7 @@ import { separatorVariants, type SeparatorVariantProps } from "../../variants/se
 export interface SeparatorProps extends Omit<ViewProps, "children"> {
   orientation?: NonNullable<SeparatorVariantProps["orientation"]>;
   spacing?: NonNullable<SeparatorVariantProps["spacing"]>;
+  ref?: Ref<ComponentRef<typeof View>>;
 }
 
 export function Separator({

package/src/components/skeleton/hooks/use-reduced-motion.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { AccessibilityInfo } from "react-native";
+
+export function useReducedMotion(): boolean {
+  const [isReducedMotion, setIsReducedMotion] = useState(false);
+
+  useEffect(() => {
+    let isSubscribed = true;
+
+    AccessibilityInfo.isReduceMotionEnabled().then((isEnabled) => {
+      if (isSubscribed) {
+        setIsReducedMotion(isEnabled);
+      }
+    });
+
+    const subscription = AccessibilityInfo.addEventListener(
+      "reduceMotionChanged",
+      setIsReducedMotion,
+    );
+
+    return () => {
+      isSubscribed = false;
+      subscription?.remove();
+    };
+  }, []);
+
+  return isReducedMotion;
+}

package/src/components/skeleton/skeleton-compositions.tsx

@@ -0,0 +1,68 @@
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { skeletonCompositionVariants } from "../../variants/skeleton-variants";
+import { Skeleton } from "./skeleton";
+
+export interface SkeletonCompositionProps extends Omit<ViewProps, "children"> {
+  accessibilityLabel: string;
+  isAnimated?: boolean;
+}
+
+export function SkeletonCard({
+  accessibilityLabel,
+  isAnimated = true,
+  className,
+  ...viewProps
+}: SkeletonCompositionProps) {
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      className={cn(skeletonCompositionVariants({ composition: "card" }), className)}
+      {...viewProps}
+    >
+      <Skeleton accessibilityLabel={accessibilityLabel} isAnimated={isAnimated} shape="block" />
+      <Skeleton accessibilityLabel={accessibilityLabel} isAnimated={isAnimated} shape="title" />
+      <Skeleton accessibilityLabel={accessibilityLabel} isAnimated={isAnimated} shape="line" />
+    </View>
+  );
+}
+
+export function SkeletonListRow({
+  accessibilityLabel,
+  isAnimated = true,
+  className,
+  ...viewProps
+}: SkeletonCompositionProps) {
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      className={cn(skeletonCompositionVariants({ composition: "listRow" }), className)}
+      {...viewProps}
+    >
+      <Skeleton accessibilityLabel={accessibilityLabel} isAnimated={isAnimated} shape="title" />
+      <Skeleton accessibilityLabel={accessibilityLabel} isAnimated={isAnimated} shape="line" />
+    </View>
+  );
+}
+
+export function SkeletonAvatarRow({
+  accessibilityLabel,
+  isAnimated = true,
+  className,
+  ...viewProps
+}: SkeletonCompositionProps) {
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      className={cn(skeletonCompositionVariants({ composition: "avatarRow" }), className)}
+      {...viewProps}
+    >
+      <Skeleton accessibilityLabel={accessibilityLabel} isAnimated={isAnimated} shape="circle" />
+      <View className={skeletonCompositionVariants({ composition: "avatarRowText" })}>
+        <Skeleton accessibilityLabel={accessibilityLabel} isAnimated={isAnimated} shape="title" />
+        <Skeleton accessibilityLabel={accessibilityLabel} isAnimated={isAnimated} shape="line" />
+      </View>
+    </View>
+  );
+}

package/src/components/skeleton/skeleton.tsx

@@ -3,6 +3,8 @@ import { Animated, type ViewProps } from "react-native";
 import { cn } from "../../lib/cn";
 import { skeletonVariants, type SkeletonVariantProps } from "../../variants/skeleton-variants";
 import { usePulseOpacity } from "./hooks/use-pulse-opacity";
+import { useReducedMotion } from "./hooks/use-reduced-motion";
+import { shouldAnimateSkeleton } from "./utils";
 
 export interface SkeletonProps extends Omit<ViewProps, "children"> {
   shape?: NonNullable<SkeletonVariantProps["shape"]>;
@@ -18,7 +20,8 @@ export function Skeleton({
   style,
   ...viewProps
 }: SkeletonProps) {
-  const opacity = usePulseOpacity(isAnimated);
+  const isReducedMotion = useReducedMotion();
+  const opacity = usePulseOpacity(shouldAnimateSkeleton({ isAnimated, isReducedMotion }));
 
   return (
     <Animated.View

package/src/components/skeleton/utils.ts

@@ -0,0 +1,11 @@
+export interface SkeletonAnimationInput {
+  isAnimated: boolean;
+  isReducedMotion: boolean;
+}
+
+export function shouldAnimateSkeleton({
+  isAnimated,
+  isReducedMotion,
+}: SkeletonAnimationInput): boolean {
+  return isAnimated && !isReducedMotion;
+}

package/src/components/spinner/spinner.tsx

@@ -0,0 +1,37 @@
+import { semantic } from "@atlure/tokens";
+import { ActivityIndicator, useColorScheme, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { spinnerVariants, type SpinnerVariantProps } from "../../variants/spinner-variants";
+
+export interface SpinnerProps extends Omit<ViewProps, "children"> {
+  size?: NonNullable<SpinnerVariantProps["size"]>;
+  accessibilityLabel: string;
+}
+
+const ACTIVITY_INDICATOR_SIZE = {
+  sm: "small",
+  md: "large",
+} as const;
+
+export function Spinner({
+  size = "md",
+  accessibilityLabel,
+  className,
+  ...viewProps
+}: SpinnerProps) {
+  const colorScheme = useColorScheme();
+
+  return (
+    <ActivityIndicator
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ busy: true }}
+      aria-busy
+      size={ACTIVITY_INDICATOR_SIZE[size]}
+      color={semantic[colorScheme === "dark" ? "dark" : "light"].primary}
+      className={cn(spinnerVariants({ size }), className)}
+      {...viewProps}
+    />
+  );
+}

package/src/components/text/text-class-context.tsx

@@ -0,0 +1,19 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+const TextClassContext = createContext<string | undefined>(undefined);
+
+export function TextClassProvider({
+  className,
+  children,
+}: {
+  className: string | undefined;
+  children: ReactNode;
+}) {
+  return <TextClassContext.Provider value={className}>{children}</TextClassContext.Provider>;
+}
+
+export function useInheritedTextClassName(): string | undefined {
+  return useContext(TextClassContext);
+}
+
+export { TextClassContext };

package/src/components/text/text.tsx

@@ -1,12 +1,21 @@
+import type { ComponentRef, Ref } from "react";
 import { Text as ReactNativeText, type TextProps as ReactNativeTextProps } from "react-native";
 
-import { cn } from "../../lib/cn";
-import { textVariants, type TextVariantProps } from "../../variants/text-variants";
+import type { TextVariantProps } from "../../variants/text-variants";
+import { useInheritedTextClassName } from "./text-class-context";
+import { resolveTextClassName } from "./utils";
 
-export interface TextProps extends ReactNativeTextProps, TextVariantProps {}
+export interface TextProps extends ReactNativeTextProps, TextVariantProps {
+  ref?: Ref<ComponentRef<typeof ReactNativeText>>;
+}
 
 export function Text({ variant, tone, className, ...textProps }: TextProps) {
+  const inheritedClassName = useInheritedTextClassName();
+
   return (
-    <ReactNativeText className={cn(textVariants({ variant, tone }), className)} {...textProps} />
+    <ReactNativeText
+      className={resolveTextClassName({ variant, tone, inheritedClassName, className })}
+      {...textProps}
+    />
   );
 }

package/src/components/text/utils.ts

@@ -0,0 +1,16 @@
+import { cn } from "../../lib/cn";
+import { textVariants, type TextVariantProps } from "../../variants/text-variants";
+
+export interface TextClassNameInput extends TextVariantProps {
+  inheritedClassName?: string | undefined;
+  className?: string | undefined;
+}
+
+export function resolveTextClassName({
+  variant,
+  tone,
+  inheritedClassName,
+  className,
+}: TextClassNameInput): string {
+  return cn(textVariants({ variant, tone }), inheritedClassName, className);
+}

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,50 @@
+import { View } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { formFieldClassName } from "../../variants/form-field-variants";
+import {
+  textareaCounterClassName,
+  textareaVariants,
+  type TextareaRows,
+} from "../../variants/textarea-variants";
+import { Input, type InputProps } from "../input/input";
+import { Text } from "../text/text";
+
+export interface TextareaProps extends Omit<InputProps, "isMultiline" | "size" | "numberOfLines"> {
+  rows?: TextareaRows;
+  hasCounter?: boolean;
+}
+
+export function Textarea({
+  rows = 3,
+  hasCounter = false,
+  maxLength,
+  value,
+  className,
+  ...inputProps
+}: TextareaProps) {
+  const control = (
+    <Input
+      isMultiline
+      size="lg"
+      textAlignVertical="top"
+      maxLength={maxLength}
+      value={value}
+      className={cn(textareaVariants({ rows }), className)}
+      {...inputProps}
+    />
+  );
+
+  if (!hasCounter || maxLength === undefined) {
+    return control;
+  }
+
+  return (
+    <View className={formFieldClassName}>
+      {control}
+      <Text variant="caption" tone="muted" className={textareaCounterClassName}>
+        {`${value?.length ?? 0}/${maxLength}`}
+      </Text>
+    </View>
+  );
+}

package/src/index.ts

@@ -7,12 +7,25 @@ export * from "./components/button/types";
 export * from "./components/card/card";
 export * from "./components/card/card-section";
 export * from "./components/checkbox/checkbox";
+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/icon-button/icon-button";
 export * from "./components/input/input";
 export * from "./components/label/label";
+export * from "./components/list-row/list-row";
+export * from "./components/screen-state/screen-state";
+export * from "./components/search-bar/search-bar";
 export * from "./components/separator/separator";
 export * from "./components/skeleton/skeleton";
+export * from "./components/skeleton/skeleton-compositions";
+export * from "./components/spinner/spinner";
 export * from "./components/switch/switch";
 export * from "./components/text/text";
+export * from "./components/text/text-class-context";
+export * from "./components/textarea/textarea";
 export * from "./lib/cn";
 export * from "./lib/touch-target";
 export * from "./variants/avatar-variants";
@@ -20,9 +33,16 @@ export * from "./variants/badge-variants";
 export * from "./variants/button-variants";
 export * from "./variants/card-variants";
 export * from "./variants/checkbox-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/search-bar-variants";
 export * from "./variants/separator-variants";
 export * from "./variants/skeleton-variants";
+export * from "./variants/spinner-variants";
+export * from "./variants/state-variants";
 export * from "./variants/switch-variants";
 export * from "./variants/text-variants";
+export * from "./variants/textarea-variants";

package/src/lib/cn.ts

@@ -1,14 +1,18 @@
-import { controlHeight } from "@atlure/tokens";
+import { controlHeight, textareaHeight } from "@atlure/tokens";
 import { type ClassValue, clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 
 const controlHeightClassValues = Object.keys(controlHeight).map((scaleKey) => `control-${scaleKey}`);
+const textareaHeightClassValues = Object.keys(textareaHeight).map(
+  (scaleKey) => `textarea-${scaleKey}`,
+);
+const heightClassValues = [...controlHeightClassValues, ...textareaHeightClassValues];
 
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      h: [{ h: controlHeightClassValues }],
-      "min-h": [{ "min-h": controlHeightClassValues }],
+      h: [{ h: heightClassValues }],
+      "min-h": [{ "min-h": heightClassValues }],
     },
   },
 });

package/src/variants/button-variants.ts

@@ -10,11 +10,13 @@ export const buttonVariants = cva(
         outline: "border-border/20 bg-transparent",
         ghost: "bg-transparent",
         destructive: "bg-destructive",
+        link: "bg-transparent",
       },
       size: {
         sm: "h-control-sm px-sm",
         md: "h-control-md px-md",
         lg: "h-control-lg px-lg",
+        icon: "h-control-icon w-control-icon px-0",
       },
       isFullWidth: {
         true: "w-full",
@@ -42,11 +44,13 @@ export const buttonLabelVariants = cva("text-center font-medium", {
       outline: "text-foreground",
       ghost: "text-foreground",
       destructive: "text-destructive-foreground",
+      link: "text-primary underline",
     },
     size: {
       sm: "text-sm",
       md: "text-base",
       lg: "text-base",
+      icon: "text-base",
     },
   },
   defaultVariants: {

package/src/variants/form-field-variants.ts

@@ -0,0 +1,17 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const formFieldClassName = "w-full gap-xs";
+
+export const formFieldMessageVariants = cva("", {
+  variants: {
+    isInvalid: {
+      true: "text-destructive",
+      false: "text-muted-foreground",
+    },
+  },
+  defaultVariants: {
+    isInvalid: false,
+  },
+});
+
+export type FormFieldMessageVariantProps = VariantProps<typeof formFieldMessageVariants>;

package/src/variants/form-scroll-view-variants.ts

@@ -0,0 +1,3 @@
+export const formScrollViewClassName = "flex-1";
+
+export const formScrollViewContentClassName = "gap-md p-md";

package/src/variants/input-variants.ts

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
 export const inputVariants = cva(
-  "w-full rounded-md border bg-input-background px-md text-base text-foreground",
+  "w-full rounded-md border bg-input-background px-md text-base text-foreground placeholder:text-muted-foreground",
   {
     variants: {
       size: {
@@ -21,14 +21,39 @@ export const inputVariants = cva(
         true: "h-auto min-h-control-lg py-sm",
         false: "",
       },
+      hasLeadingIcon: {
+        true: "pl-3xl",
+        false: "",
+      },
+      hasTrailingIcon: {
+        true: "pr-3xl",
+        false: "",
+      },
     },
     defaultVariants: {
       size: "md",
       isInvalid: false,
       isDisabled: false,
       isMultiline: false,
+      hasLeadingIcon: false,
+      hasTrailingIcon: false,
     },
   },
 );
 
+export const inputIconSlotVariants = cva("absolute inset-y-0 justify-center", {
+  variants: {
+    slot: {
+      leading: "pointer-events-none left-md",
+      trailing: "right-md",
+    },
+  },
+  defaultVariants: {
+    slot: "leading",
+  },
+});
+
+export const inputFieldWrapperClassName = "relative w-full justify-center";
+
 export type InputVariantProps = VariantProps<typeof inputVariants>;
+export type InputIconSlotVariantProps = VariantProps<typeof inputIconSlotVariants>;

package/src/variants/label-variants.ts

@@ -17,4 +17,6 @@ export const labelVariants = cva("text-sm font-medium text-foreground", {
   },
 });
 
+export const labelRequiredMarkerClassName = "text-destructive";
+
 export type LabelVariantProps = VariantProps<typeof labelVariants>;

package/src/variants/list-row-variants.ts

@@ -0,0 +1,24 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const listRowVariants = cva(
+  "w-full min-h-control-lg flex-row items-center gap-md px-md py-sm",
+  {
+    variants: {
+      isDisabled: {
+        true: "opacity-50",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      isDisabled: false,
+    },
+  },
+);
+
+export const listRowTextClassName = "flex-1 gap-xs";
+
+export const listRowTrailingClassName = "items-end justify-center";
+
+export const listRowChevronClassName = "text-muted-foreground";
+
+export type ListRowVariantProps = VariantProps<typeof listRowVariants>;

package/src/variants/search-bar-variants.ts

@@ -0,0 +1 @@
+export const searchBarIconClassName = "text-muted-foreground";

package/src/variants/skeleton-variants.ts

@@ -14,4 +14,19 @@ export const skeletonVariants = cva("bg-muted", {
   },
 });
 
+export const skeletonCompositionVariants = cva("", {
+  variants: {
+    composition: {
+      card: "w-full gap-sm rounded-lg bg-card p-md",
+      listRow: "w-full gap-sm py-sm",
+      avatarRow: "w-full flex-row items-center gap-md py-sm",
+      avatarRowText: "flex-1 gap-sm",
+    },
+  },
+  defaultVariants: {
+    composition: "card",
+  },
+});
+
 export type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
+export type SkeletonCompositionVariantProps = VariantProps<typeof skeletonCompositionVariants>;

package/src/variants/spinner-variants.ts

@@ -0,0 +1,15 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export const spinnerVariants = cva("self-center", {
+  variants: {
+    size: {
+      sm: "h-control-sm",
+      md: "h-control-md",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export type SpinnerVariantProps = VariantProps<typeof spinnerVariants>;

package/src/variants/state-variants.ts

@@ -0,0 +1,7 @@
+export const stateLayoutClassName = "w-full items-center gap-sm px-md py-3xl";
+
+export const stateIconClassName = "items-center justify-center pb-sm";
+
+export const stateTextClassName = "text-center";
+
+export const stateActionClassName = "pt-sm";

package/src/variants/text-variants.ts

@@ -1,21 +1,23 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
-export const textVariants = cva("text-foreground", {
+export const textVariants = cva("", {
   variants: {
     variant: {
       display: "text-3xl font-bold",
-      heading: "text-2xl font-bold",
-      title: "text-xl font-semibold",
-      subtitle: "text-lg font-medium",
+      h1: "text-2xl font-bold",
+      h2: "text-xl font-semibold",
+      h3: "text-lg font-semibold",
       body: "text-base font-normal",
-      caption: "text-sm font-normal",
-      overline: "text-xs font-medium uppercase",
+      bodySm: "text-sm font-normal",
+      label: "text-sm font-medium",
+      caption: "text-xs font-normal",
     },
     tone: {
       default: "text-foreground",
       muted: "text-muted-foreground",
       primary: "text-primary",
       destructive: "text-destructive",
+      inverse: "text-primary-foreground",
     },
   },
   defaultVariants: {