@atlure/ui 0.2.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlure/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Atlure React Native component library: NativeWind primitives built on @atlure/tokens, shipped as untranspiled TypeScript source",
   "license": "MIT",
   "author": "David Moreira",
@@ -37,7 +37,8 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "2.6.0",
-    "@atlure/tokens": "0.2.0"
+    "@atlure/icons": "0.4.0",
+    "@atlure/tokens": "0.4.0"
   },
   "peerDependencies": {
     "nativewind": "^4.2.6",
@@ -45,6 +46,7 @@
     "react-native": ">=0.81.0",
     "react-native-reanimated": ">=3.16.0",
     "react-native-safe-area-context": ">=4.10.0",
+    "react-native-svg": ">=15.0.0",
     "tailwindcss": "^3.4.19"
   },
   "peerDependenciesMeta": {

package/src/components/button/button.tsx

@@ -3,6 +3,7 @@ import { ActivityIndicator, Pressable } from "react-native";
 import { cn } from "../../lib/cn";
 import { touchTargetHitSlop } from "../../lib/touch-target";
 import { buttonLabelVariants, buttonVariants } from "../../variants/button-variants";
+import { TextClassProvider } from "../text/text-class-context";
 import { Text } from "../text/text";
 import type { ButtonProps } from "./types";
 
@@ -39,9 +40,11 @@ export function Button({
       )}
       {...pressableProps}
     >
-      {isLoading ? <ActivityIndicator size="small" /> : leadingIcon}
-      <Text className={cn(buttonLabelVariants({ variant, size }), labelClassName)}>{label}</Text>
-      {!isLoading && trailingIcon}
+      <TextClassProvider className={buttonLabelVariants({ variant, size })}>
+        {isLoading ? <ActivityIndicator size="small" /> : leadingIcon}
+        <Text className={labelClassName}>{label}</Text>
+        {!isLoading && trailingIcon}
+      </TextClassProvider>
     </Pressable>
   );
 }

package/src/components/button/types.ts

@@ -1,21 +1,31 @@
-import type { ReactNode } from "react";
-import type { PressableProps } from "react-native";
+import type { ComponentRef, ReactNode, Ref } from "react";
+import type { Pressable, PressableProps } from "react-native";
 
 import type { ControlSize } from "../../lib/touch-target";
 import type { ButtonVariantProps } from "../../variants/button-variants";
 
+export type ButtonVariant = NonNullable<ButtonVariantProps["variant"]>;
 export type ButtonSize = Extract<ControlSize, "sm" | "md" | "lg">;
 
-export interface ButtonProps
+export interface PressableButtonProps
   extends Omit<PressableProps, "children" | "disabled" | "accessibilityState"> {
-  label: string;
-  variant?: NonNullable<ButtonVariantProps["variant"]>;
-  size?: ButtonSize;
+  variant?: ButtonVariant;
   isFullWidth?: boolean;
   isDisabled?: boolean;
   isLoading?: boolean;
+  className?: string;
+  ref?: Ref<ComponentRef<typeof Pressable>>;
+}
+
+export interface ButtonProps extends PressableButtonProps {
+  label: string;
+  size?: ButtonSize;
   leadingIcon?: ReactNode;
   trailingIcon?: ReactNode;
-  className?: string;
   labelClassName?: string;
 }
+
+export interface IconButtonProps extends PressableButtonProps {
+  icon: ReactNode;
+  accessibilityLabel: string;
+}

package/src/components/card/card-section.tsx

@@ -1,14 +1,30 @@
+import type { ComponentRef, Ref } from "react";
 import { View, type ViewProps } from "react-native";
 
 import { cn } from "../../lib/cn";
 import { cardSectionVariants } from "../../variants/card-variants";
+import { Text, type TextProps } from "../text/text";
 
-export interface CardSectionProps extends ViewProps {}
+export interface CardSectionProps extends ViewProps {
+  ref?: Ref<ComponentRef<typeof View>>;
+}
+
+export type CardTitleProps = Omit<TextProps, "variant">;
+
+export type CardDescriptionProps = Omit<TextProps, "variant">;
 
 export function CardHeader({ className, ...viewProps }: CardSectionProps) {
   return <View className={cn(cardSectionVariants({ section: "header" }), className)} {...viewProps} />;
 }
 
+export function CardTitle(textProps: CardTitleProps) {
+  return <Text accessibilityRole="header" variant="h3" {...textProps} />;
+}
+
+export function CardDescription(textProps: CardDescriptionProps) {
+  return <Text variant="bodySm" tone="muted" {...textProps} />;
+}
+
 export function CardContent({ className, ...viewProps }: CardSectionProps) {
   return (
     <View className={cn(cardSectionVariants({ section: "content" }), className)} {...viewProps} />

package/src/components/card/card.tsx

@@ -1,3 +1,4 @@
+import type { ComponentRef, Ref } from "react";
 import { Pressable, View, type ViewProps } from "react-native";
 
 import { cn } from "../../lib/cn";
@@ -7,6 +8,7 @@ export interface CardProps extends ViewProps, Pick<CardVariantProps, "variant">
   onPress?: () => void;
   accessibilityLabel?: string;
   isDisabled?: boolean;
+  ref?: Ref<ComponentRef<typeof View>>;
 }
 
 export function Card({

package/src/components/empty-state/empty-state.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  stateActionClassName,
+  stateIconClassName,
+  stateLayoutClassName,
+  stateTextClassName,
+} from "../../variants/state-variants";
+import { Text } from "../text/text";
+
+export interface EmptyStateProps extends Omit<ViewProps, "children"> {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  action?: ReactNode;
+}
+
+export function EmptyState({
+  title,
+  description,
+  icon,
+  action,
+  className,
+  ...viewProps
+}: EmptyStateProps) {
+  return (
+    <View className={cn(stateLayoutClassName, className)} {...viewProps}>
+      {icon ? <View className={stateIconClassName}>{icon}</View> : null}
+      <Text accessibilityRole="header" variant="h3" className={stateTextClassName}>
+        {title}
+      </Text>
+      {description ? (
+        <Text variant="bodySm" tone="muted" className={stateTextClassName}>
+          {description}
+        </Text>
+      ) : null}
+      {action ? <View className={stateActionClassName}>{action}</View> : null}
+    </View>
+  );
+}

package/src/components/error-state/error-state.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  stateActionClassName,
+  stateIconClassName,
+  stateLayoutClassName,
+  stateTextClassName,
+} from "../../variants/state-variants";
+import { Button } from "../button/button";
+import { Text } from "../text/text";
+
+export interface ErrorStateProps extends Omit<ViewProps, "children"> {
+  title: string;
+  message: string;
+  retryLabel: string;
+  onRetry: () => void;
+  icon?: ReactNode;
+}
+
+export function ErrorState({
+  title,
+  message,
+  retryLabel,
+  onRetry,
+  icon,
+  className,
+  ...viewProps
+}: ErrorStateProps) {
+  return (
+    <View accessibilityRole="alert" className={cn(stateLayoutClassName, className)} {...viewProps}>
+      {icon ? <View className={stateIconClassName}>{icon}</View> : null}
+      <Text accessibilityRole="header" variant="h3" className={stateTextClassName}>
+        {title}
+      </Text>
+      <Text variant="bodySm" tone="muted" className={stateTextClassName}>
+        {message}
+      </Text>
+      <View className={stateActionClassName}>
+        <Button variant="secondary" label={retryLabel} onPress={onRetry} />
+      </View>
+    </View>
+  );
+}

package/src/components/form-field/form-field-context.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+export interface FormFieldControl {
+  nativeID: string;
+  labelledBy: string | undefined;
+  describedBy: string | undefined;
+  isInvalid: boolean;
+  isDisabled: boolean;
+  isRequired: boolean;
+}
+
+const FormFieldContext = createContext<FormFieldControl | undefined>(undefined);
+
+export function FormFieldProvider({
+  control,
+  children,
+}: {
+  control: FormFieldControl;
+  children: ReactNode;
+}) {
+  return <FormFieldContext.Provider value={control}>{children}</FormFieldContext.Provider>;
+}
+
+export function useFormFieldControl(): FormFieldControl | undefined {
+  return useContext(FormFieldContext);
+}
+
+export { FormFieldContext };

package/src/components/form-field/form-field.tsx

@@ -0,0 +1,74 @@
+import { useId, type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { formFieldClassName, formFieldMessageVariants } from "../../variants/form-field-variants";
+import { Label } from "../label/label";
+import { Text } from "../text/text";
+import { FormFieldProvider } from "./form-field-context";
+
+export interface FormFieldProps extends Omit<ViewProps, "children"> {
+  label?: string;
+  helperText?: string;
+  error?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  nativeID?: string;
+  children: ReactNode;
+}
+
+export function FormField({
+  label,
+  helperText,
+  error,
+  isRequired = false,
+  isDisabled = false,
+  nativeID,
+  className,
+  children,
+  ...viewProps
+}: FormFieldProps) {
+  const generatedID = useId();
+  const controlID = nativeID ?? generatedID;
+  const labelID = `${controlID}-label`;
+  const messageID = `${controlID}-message`;
+  const isInvalid = Boolean(error);
+  const message = error ?? helperText;
+
+  return (
+    <View className={cn(formFieldClassName, className)} {...viewProps}>
+      {label ? (
+        <Label
+          nativeID={labelID}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+        >
+          {label}
+        </Label>
+      ) : null}
+      <FormFieldProvider
+        control={{
+          nativeID: controlID,
+          labelledBy: label ? labelID : undefined,
+          describedBy: message ? messageID : undefined,
+          isInvalid,
+          isDisabled,
+          isRequired,
+        }}
+      >
+        {children}
+      </FormFieldProvider>
+      {message ? (
+        <Text
+          nativeID={messageID}
+          variant="caption"
+          className={formFieldMessageVariants({ isInvalid })}
+          accessibilityLiveRegion={isInvalid ? "polite" : "none"}
+        >
+          {message}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/components/form-scroll-view/form-scroll-view.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import { KeyboardAvoidingView, Platform, ScrollView, type ScrollViewProps } from "react-native";
+
+import { cn } from "../../lib/cn";
+import {
+  formScrollViewClassName,
+  formScrollViewContentClassName,
+} from "../../variants/form-scroll-view-variants";
+
+export interface FormScrollViewProps extends Omit<ScrollViewProps, "children"> {
+  contentContainerClassName?: string;
+  children: ReactNode;
+}
+
+export function FormScrollView({
+  className,
+  contentContainerClassName,
+  children,
+  ...scrollViewProps
+}: FormScrollViewProps) {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      className={cn(formScrollViewClassName, className)}
+    >
+      <ScrollView
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
+        contentContainerClassName={cn(formScrollViewContentClassName, contentContainerClassName)}
+        {...scrollViewProps}
+      >
+        {children}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

package/src/components/icon-button/icon-button.tsx

@@ -0,0 +1,41 @@
+import { ActivityIndicator, Pressable } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlop } from "../../lib/touch-target";
+import { buttonLabelVariants, buttonVariants } from "../../variants/button-variants";
+import { TextClassProvider } from "../text/text-class-context";
+import type { IconButtonProps } from "../button/types";
+
+export function IconButton({
+  icon,
+  accessibilityLabel,
+  variant = "primary",
+  isFullWidth = false,
+  isDisabled = false,
+  isLoading = false,
+  className,
+  ...pressableProps
+}: IconButtonProps) {
+  const isPressBlocked = isDisabled || isLoading;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled: isPressBlocked, busy: isLoading }}
+      aria-disabled={isPressBlocked}
+      aria-busy={isLoading}
+      disabled={isPressBlocked}
+      hitSlop={touchTargetHitSlop("icon")}
+      className={cn(
+        buttonVariants({ variant, size: "icon", isFullWidth, isDisabled: isPressBlocked }),
+        className,
+      )}
+      {...pressableProps}
+    >
+      <TextClassProvider className={buttonLabelVariants({ variant, size: "icon" })}>
+        {isLoading ? <ActivityIndicator size="small" /> : icon}
+      </TextClassProvider>
+    </Pressable>
+  );
+}

package/src/components/input/input.tsx

@@ -1,34 +1,85 @@
-import { TextInput, type TextInputProps } from "react-native";
+import type { ComponentRef, ReactNode, Ref } from "react";
+import { TextInput, type TextInputProps, View } from "react-native";
 
 import { cn } from "../../lib/cn";
 import { touchTargetHitSlop } from "../../lib/touch-target";
-import { inputVariants, type InputVariantProps } from "../../variants/input-variants";
+import {
+  inputFieldWrapperClassName,
+  inputIconSlotVariants,
+  inputVariants,
+  type InputVariantProps,
+} from "../../variants/input-variants";
+import { useFormFieldControl } from "../form-field/form-field-context";
 
 export interface InputProps extends Omit<TextInputProps, "editable" | "multiline"> {
   size?: NonNullable<InputVariantProps["size"]>;
   isDisabled?: boolean;
   isInvalid?: boolean;
+  isRequired?: boolean;
   isMultiline?: boolean;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  ref?: Ref<ComponentRef<typeof TextInput>>;
 }
 
 export function Input({
   size = "md",
-  isDisabled = false,
-  isInvalid = false,
+  isDisabled,
+  isInvalid,
+  isRequired,
   isMultiline = false,
+  leadingIcon,
+  trailingIcon,
   className,
+  nativeID,
   ...textInputProps
 }: InputProps) {
-  return (
+  const field = useFormFieldControl();
+  const isControlDisabled = isDisabled ?? field?.isDisabled ?? false;
+  const isControlInvalid = isInvalid ?? field?.isInvalid ?? false;
+  const isControlRequired = isRequired ?? field?.isRequired ?? false;
+
+  const control = (
     <TextInput
-      accessibilityState={{ disabled: isDisabled }}
-      aria-disabled={isDisabled}
-      aria-invalid={isInvalid}
-      editable={!isDisabled}
+      accessibilityState={{ disabled: isControlDisabled }}
+      accessibilityLabelledBy={field?.labelledBy}
+      aria-labelledby={field?.labelledBy}
+      aria-describedby={field?.describedBy}
+      aria-disabled={isControlDisabled}
+      aria-invalid={isControlInvalid}
+      aria-required={isControlRequired}
+      nativeID={nativeID ?? field?.nativeID}
+      editable={!isControlDisabled}
       multiline={isMultiline}
       hitSlop={touchTargetHitSlop(size)}
-      className={cn(inputVariants({ size, isInvalid, isDisabled, isMultiline }), className)}
+      className={cn(
+        inputVariants({
+          size,
+          isInvalid: isControlInvalid,
+          isDisabled: isControlDisabled,
+          isMultiline,
+          hasLeadingIcon: Boolean(leadingIcon),
+          hasTrailingIcon: Boolean(trailingIcon),
+        }),
+        className,
+      )}
       {...textInputProps}
     />
   );
+
+  if (!leadingIcon && !trailingIcon) {
+    return control;
+  }
+
+  return (
+    <View className={inputFieldWrapperClassName}>
+      {leadingIcon ? (
+        <View className={inputIconSlotVariants({ slot: "leading" })}>{leadingIcon}</View>
+      ) : null}
+      {control}
+      {trailingIcon ? (
+        <View className={inputIconSlotVariants({ slot: "trailing" })}>{trailingIcon}</View>
+      ) : null}
+    </View>
+  );
 }

package/src/components/label/label.tsx

@@ -1,16 +1,19 @@
 import { cn } from "../../lib/cn";
-import { labelVariants } from "../../variants/label-variants";
+import { labelRequiredMarkerClassName, labelVariants } from "../../variants/label-variants";
 import { Text, type TextProps } from "../text/text";
 
 export interface LabelProps extends Omit<TextProps, "variant" | "tone"> {
   isDisabled?: boolean;
   isInvalid?: boolean;
+  isRequired?: boolean;
 }
 
 export function Label({
   isDisabled = false,
   isInvalid = false,
+  isRequired = false,
   className,
+  children,
   ...textProps
 }: LabelProps) {
   return (
@@ -18,6 +21,13 @@ export function Label({
       accessibilityRole="text"
       className={cn(labelVariants({ isDisabled, isInvalid }), className)}
       {...textProps}
-    />
+    >
+      {children}
+      {isRequired ? (
+        <Text aria-hidden accessibilityElementsHidden className={labelRequiredMarkerClassName}>
+          {" *"}
+        </Text>
+      ) : null}
+    </Text>
   );
 }

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

@@ -0,0 +1,78 @@
+import { ChevronRight, iconSize } from "@atlure/icons";
+import type { ReactNode } from "react";
+import { Pressable, type PressableProps, View } from "react-native";
+
+import { cn } from "../../lib/cn";
+import { touchTargetHitSlop } from "../../lib/touch-target";
+import {
+  listRowChevronClassName,
+  listRowTextClassName,
+  listRowTrailingClassName,
+  listRowVariants,
+} from "../../variants/list-row-variants";
+import { Text } from "../text/text";
+
+export interface ListRowProps
+  extends Omit<PressableProps, "children" | "disabled" | "accessibilityState"> {
+  title: string;
+  subtitle?: string;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  hasChevron?: boolean;
+  isDisabled?: boolean;
+}
+
+export function ListRow({
+  title,
+  subtitle,
+  leading,
+  trailing,
+  hasChevron = false,
+  isDisabled = false,
+  onPress,
+  accessibilityLabel,
+  className,
+  ...pressableProps
+}: ListRowProps) {
+  const content = (
+    <>
+      {leading}
+      <View className={listRowTextClassName}>
+        <Text variant="body">{title}</Text>
+        {subtitle ? (
+          <Text variant="bodySm" tone="muted">
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+      {trailing ? <View className={listRowTrailingClassName}>{trailing}</View> : null}
+      {hasChevron ? (
+        <ChevronRight size={iconSize.md} className={listRowChevronClassName} />
+      ) : null}
+    </>
+  );
+
+  if (!onPress) {
+    return (
+      <View className={cn(listRowVariants({ isDisabled }), className)}>
+        {content}
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityState={{ disabled: isDisabled }}
+      aria-disabled={isDisabled}
+      disabled={isDisabled}
+      hitSlop={touchTargetHitSlop("md")}
+      onPress={onPress}
+      className={cn(listRowVariants({ isDisabled }), className)}
+      {...pressableProps}
+    >
+      {content}
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+
+export type ScreenStatus = "loading" | "error" | "ready";
+
+export interface ScreenStateProps {
+  status: ScreenStatus;
+  isEmpty?: boolean;
+  loadingState: ReactNode;
+  errorState: ReactNode;
+  emptyState: ReactNode;
+  children: ReactNode;
+}
+
+export function ScreenState({
+  status,
+  isEmpty = false,
+  loadingState,
+  errorState,
+  emptyState,
+  children,
+}: ScreenStateProps) {
+  if (status === "loading") {
+    return loadingState;
+  }
+
+  if (status === "error") {
+    return errorState;
+  }
+
+  if (isEmpty) {
+    return emptyState;
+  }
+
+  return children;
+}