@atlure/ui 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlure/ui",
-  "version": "0.7.0",
+  "version": "0.9.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.7.0",
-    "@atlure/tokens": "0.7.0",
-    "@atlure/types": "0.7.0"
+    "@atlure/icons": "0.9.0",
+    "@atlure/tokens": "0.9.0",
+    "@atlure/types": "0.9.0"
   },
   "peerDependencies": {
     "nativewind": "^4.2.6",

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/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)} />;
+}