@atlure/ui 0.6.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlure/ui",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Atlure React Native component library: NativeWind primitives built on @atlure/tokens, shipped as untranspiled TypeScript source",
   "license": "MIT",
   "author": "David Moreira",
@@ -37,9 +37,9 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "tailwind-merge": "2.6.0",
-    "@atlure/icons": "0.6.1",
-    "@atlure/tokens": "0.6.1",
-    "@atlure/types": "0.6.1"
+    "@atlure/icons": "0.8.0",
+    "@atlure/tokens": "0.8.0",
+    "@atlure/types": "0.8.0"
   },
   "peerDependencies": {
     "nativewind": "^4.2.6",

package/src/components/badge/urgency-badge.tsx

@@ -11,11 +11,23 @@ export const urgencyBadgeVariant: Record<Urgency, BadgeVariant> = {
   high: "destructive",
 };
 
+export const DEFAULT_URGENCY_LABELS: Record<Urgency, string> = {
+  low: "Low priority",
+  medium: "Normal",
+  high: "High priority",
+};
+
 export interface UrgencyBadgeProps extends Omit<BadgeProps, "label" | "variant"> {
   urgency: Urgency;
-  label: string;
+  label?: string;
 }
 
-export function UrgencyBadge({ urgency, ...badgeProps }: UrgencyBadgeProps) {
-  return <Badge variant={urgencyBadgeVariant[urgency]} {...badgeProps} />;
+export function UrgencyBadge({ urgency, label, ...badgeProps }: UrgencyBadgeProps) {
+  return (
+    <Badge
+      variant={urgencyBadgeVariant[urgency]}
+      label={label ?? DEFAULT_URGENCY_LABELS[urgency]}
+      {...badgeProps}
+    />
+  );
 }

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

@@ -10,11 +10,38 @@ import {
 } from "../../variants/state-variants";
 import { Text } from "../text/text";
 
-export interface EmptyStateProps extends Omit<ViewProps, "children"> {
+export type EmptyStatePreset = "no-results" | "no-filters" | "no-radius";
+
+export interface EmptyStateCopy {
   title: string;
+  message: string;
+  actionLabel: string;
+}
+
+export const DEFAULT_EMPTY_STATE_COPY: Record<EmptyStatePreset, EmptyStateCopy> = {
+  "no-results": {
+    title: "No matches",
+    message: "Nothing matched your query.",
+    actionLabel: "Clear search",
+  },
+  "no-filters": {
+    title: "No matches",
+    message: "Try loosening your filters.",
+    actionLabel: "Clear filters",
+  },
+  "no-radius": {
+    title: "Nobody nearby",
+    message: "Try a wider radius.",
+    actionLabel: "Widen radius",
+  },
+};
+
+export interface EmptyStateProps extends Omit<ViewProps, "children"> {
+  title?: string;
   description?: string;
   icon?: ReactNode;
   action?: ReactNode;
+  preset?: EmptyStatePreset;
 }
 
 export function EmptyState({
@@ -22,18 +49,23 @@ export function EmptyState({
   description,
   icon,
   action,
+  preset,
   className,
   ...viewProps
 }: EmptyStateProps) {
+  const copy = preset ? DEFAULT_EMPTY_STATE_COPY[preset] : undefined;
+  const resolvedTitle = title ?? copy?.title ?? "";
+  const resolvedDescription = description ?? copy?.message;
+
   return (
     <View className={cn(stateLayoutClassName, className)} {...viewProps}>
       {icon ? <View className={stateIconClassName}>{icon}</View> : null}
       <Text accessibilityRole="header" variant="h3" className={stateTextClassName}>
-        {title}
+        {resolvedTitle}
       </Text>
-      {description ? (
+      {resolvedDescription ? (
         <Text variant="bodySm" tone="muted" className={stateTextClassName}>
-          {description}
+          {resolvedDescription}
         </Text>
       ) : null}
       {action ? <View className={stateActionClassName}>{action}</View> : null}

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

@@ -12,19 +12,21 @@ import { Button } from "../button/button";
 import { Text } from "../text/text";
 
 export interface ErrorStateProps extends Omit<ViewProps, "children"> {
-  title: string;
-  message: string;
-  retryLabel: string;
+  title?: string;
+  message?: string;
+  retryLabel?: string;
   onRetry: () => void;
   icon?: ReactNode;
+  retryTestID?: string;
 }
 
 export function ErrorState({
-  title,
+  title = "Something went wrong",
   message,
-  retryLabel,
+  retryLabel = "Retry",
   onRetry,
   icon,
+  retryTestID,
   className,
   ...viewProps
 }: ErrorStateProps) {
@@ -34,11 +36,13 @@ export function ErrorState({
       <Text accessibilityRole="header" variant="h3" className={stateTextClassName}>
         {title}
       </Text>
-      <Text variant="bodySm" tone="muted" className={stateTextClassName}>
-        {message}
-      </Text>
+      {message !== undefined ? (
+        <Text variant="bodySm" tone="muted" className={stateTextClassName}>
+          {message}
+        </Text>
+      ) : null}
       <View className={stateActionClassName}>
-        <Button variant="secondary" label={retryLabel} onPress={onRetry} />
+        <Button variant="secondary" label={retryLabel} onPress={onRetry} testID={retryTestID} />
       </View>
     </View>
   );

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

@@ -3,31 +3,45 @@ import { View, type ViewProps } from "react-native";
 
 import { cn } from "../../lib/cn";
 import { formFieldClassName, formFieldMessageVariants } from "../../variants/form-field-variants";
+import { Input, type InputProps } from "../input/input";
 import { Label } from "../label/label";
 import { Text } from "../text/text";
 import { FormFieldProvider } from "./form-field-context";
 
-export interface FormFieldProps extends Omit<ViewProps, "children"> {
+interface FormFieldSharedProps {
   label?: string;
   helperText?: string;
   error?: string;
   isRequired?: boolean;
   isDisabled?: boolean;
   nativeID?: string;
+}
+
+export interface FormFieldContainerProps
+  extends FormFieldSharedProps,
+    Omit<ViewProps, "children"> {
+  variant?: "container";
   children: ReactNode;
 }
 
-export function FormField({
-  label,
-  helperText,
-  error,
-  isRequired = false,
-  isDisabled = false,
-  nativeID,
-  className,
-  children,
-  ...viewProps
-}: FormFieldProps) {
+export interface FormFieldInlineProps extends FormFieldSharedProps, Omit<InputProps, "children"> {
+  variant: "inline";
+  inputClassName?: string;
+  wrapperClassName?: string;
+}
+
+export type FormFieldProps = FormFieldContainerProps | FormFieldInlineProps;
+
+export function FormField(props: FormFieldProps) {
+  const {
+    label,
+    helperText,
+    error,
+    isRequired = false,
+    isDisabled = false,
+    nativeID,
+  } = props;
+
   const generatedID = useId();
   const controlID = nativeID ?? generatedID;
   const labelID = `${controlID}-label`;
@@ -35,8 +49,15 @@ export function FormField({
   const isInvalid = Boolean(error);
   const message = error ?? helperText;
 
+  const wrapperClassName =
+    props.variant === "inline" ? props.wrapperClassName : props.className;
+  const outerViewProps = props.variant === "inline" ? undefined : extractOuterViewProps(props);
+
+  const providedChildren =
+    props.variant === "inline" ? renderInline(props) : props.children;
+
   return (
-    <View className={cn(formFieldClassName, className)} {...viewProps}>
+    <View className={cn(formFieldClassName, wrapperClassName)} {...outerViewProps}>
       {label ? (
         <Label
           nativeID={labelID}
@@ -57,7 +78,7 @@ export function FormField({
           isRequired,
         }}
       >
-        {children}
+        {providedChildren}
       </FormFieldProvider>
       {message ? (
         <Text
@@ -72,3 +93,36 @@ export function FormField({
     </View>
   );
 }
+
+const SHARED_KEYS = new Set([
+  "label",
+  "helperText",
+  "error",
+  "isRequired",
+  "isDisabled",
+  "nativeID",
+  "variant",
+  "children",
+  "className",
+]);
+
+function extractOuterViewProps(props: FormFieldContainerProps): Omit<ViewProps, "className"> {
+  const viewProps: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (!SHARED_KEYS.has(key)) {
+      viewProps[key] = value;
+    }
+  }
+  return viewProps as Omit<ViewProps, "className">;
+}
+
+function renderInline(props: FormFieldInlineProps) {
+  const { inputClassName, ...rest } = props;
+  const inputProps: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(rest)) {
+    if (!SHARED_KEYS.has(key) && key !== "wrapperClassName") {
+      inputProps[key] = value;
+    }
+  }
+  return <Input className={inputClassName} {...(inputProps as InputProps)} />;
+}

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

@@ -1,4 +1,5 @@
 import { iconSize, Search, X } from "@atlure/icons";
+import { useState } from "react";
 import { Pressable } from "react-native";
 
 import { touchTargetHitSlop } from "../../lib/touch-target";
@@ -8,42 +9,57 @@ import { useDebouncedCallback } from "./hooks/use-debounced-callback";
 
 export interface SearchBarProps
   extends Omit<InputProps, "leadingIcon" | "trailingIcon" | "isMultiline" | "value"> {
-  value: string;
-  onChangeText: (value: string) => void;
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (value: string) => void;
   onChangeDebounced?: (value: string) => void;
+  onCommit?: (value: string) => void;
   debounceMs?: number;
   clearAccessibilityLabel: string;
 }
 
 export function SearchBar({
   value,
+  defaultValue,
   onChangeText,
   onChangeDebounced,
+  onCommit,
   debounceMs = 300,
   clearAccessibilityLabel,
   ...inputProps
 }: SearchBarProps) {
-  const { schedule, flush } = useDebouncedCallback(onChangeDebounced, debounceMs);
+  const isUncontrolled = defaultValue !== undefined;
+  const [draft, setDraft] = useState(defaultValue ?? "");
+  const currentValue = isUncontrolled ? draft : (value ?? "");
+
+  const debouncedTarget = isUncontrolled ? onCommit : onChangeDebounced;
+  const { schedule, flush } = useDebouncedCallback(debouncedTarget, debounceMs);
 
   const handleChangeText = (nextValue: string) => {
-    onChangeText(nextValue);
+    if (isUncontrolled) {
+      setDraft(nextValue);
+    }
+    onChangeText?.(nextValue);
     schedule(nextValue);
   };
 
   const handleClear = () => {
-    onChangeText("");
+    if (isUncontrolled) {
+      setDraft("");
+    }
+    onChangeText?.("");
     flush("");
   };
 
   return (
     <Input
-      value={value}
+      value={currentValue}
       onChangeText={handleChangeText}
       returnKeyType="search"
       clearButtonMode="never"
       leadingIcon={<Search size={iconSize.md} className={searchBarIconClassName} />}
       trailingIcon={
-        value.length > 0 ? (
+        currentValue.length > 0 ? (
           <Pressable
             accessibilityRole="button"
             accessibilityLabel={clearAccessibilityLabel}

package/src/components/sheet/sheet.tsx

@@ -27,21 +27,61 @@ import {
   SHEET_PAN_ACTIVATION_DISTANCE,
 } from "./utils";
 
+export type SheetVariant = "snap" | "modal-slide";
+
 export interface SheetProps {
   isOpen: boolean;
   onClose: () => void;
-  backdropAccessibilityLabel: string;
+  backdropAccessibilityLabel?: string;
   accessibilityLabel?: string;
   snapPoints?: readonly number[];
   bottomInset?: number;
+  variant?: SheetVariant;
   className?: string;
   children: ReactNode;
 }
 
-export function Sheet({
+export function Sheet(props: SheetProps) {
+  if (props.variant === "modal-slide") {
+    return <ModalSlideSheet {...props} />;
+  }
+
+  return <SnapSheet {...props} />;
+}
+
+function ModalSlideSheet({
+  isOpen,
+  onClose,
+  backdropAccessibilityLabel = "Close sheet",
+  accessibilityLabel,
+  className,
+  children,
+}: SheetProps) {
+  return (
+    <Modal visible={isOpen} transparent animationType="slide" onRequestClose={onClose}>
+      <View className={sheetContainerClassName}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={backdropAccessibilityLabel}
+          className={sheetBackdropClassName}
+          onPress={onClose}
+        />
+        <View
+          accessibilityViewIsModal
+          accessibilityLabel={accessibilityLabel}
+          className={cn(sheetContentClassName, className)}
+        >
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+function SnapSheet({
   isOpen,
   onClose,
-  backdropAccessibilityLabel,
+  backdropAccessibilityLabel = "Close sheet",
   accessibilityLabel,
   snapPoints = DEFAULT_SHEET_SNAP_POINTS,
   bottomInset = 0,

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

@@ -26,10 +26,11 @@ export function starFillAt(starNumber: number, value: number): StarFill {
 }
 
 export interface StarRatingProps extends Omit<ViewProps, "children"> {
-  value: number;
+  value: number | null;
   max?: number;
   size?: StarRatingSize;
   showValue?: boolean;
+  count?: number;
   isInteractive?: boolean;
   onChange?: (value: number) => void;
   rateAccessibilityLabel?: (starNumber: number, max: number) => string;
@@ -40,6 +41,7 @@ export function StarRating({
   max = 5,
   size = "md",
   showValue = false,
+  count,
   isInteractive = false,
   onChange,
   rateAccessibilityLabel = (starNumber, total) => `Rate ${starNumber} out of ${total}`,
@@ -49,15 +51,18 @@ export function StarRating({
 }: StarRatingProps) {
   const starNumbers = Array.from({ length: max }, (_, index) => index + 1);
   const pixelSize = starRatingIconSize[size];
+  const hasValue = value !== null;
+  const effectiveValue = hasValue ? value : 0;
+  const showCount = hasValue && typeof count === "number" && count >= 0;
 
   return (
     <View
-      accessibilityLabel={accessibilityLabel ?? `${value} out of ${max}`}
+      accessibilityLabel={accessibilityLabel ?? (hasValue ? `${value} out of ${max}` : "Not rated")}
       className={cn(starRatingClassName, className)}
       {...viewProps}
     >
       {starNumbers.map((starNumber) => {
-        const fill = starFillAt(starNumber, value);
+        const fill = starFillAt(starNumber, effectiveValue);
         const isPainted = fill !== "empty";
         const StarGlyph = fill === "half" ? StarHalf : Star;
 
@@ -90,9 +95,12 @@ export function StarRating({
           </Pressable>
         );
       })}
-      {showValue ? (
+      {showValue && hasValue ? (
         <Text className={starRatingValueVariants({ size })}>{value.toFixed(1)}</Text>
       ) : null}
+      {showCount ? (
+        <Text className={starRatingValueVariants({ size })}>{`(${count})`}</Text>
+      ) : null}
     </View>
   );
 }