fix props in starter

Author: snowystinger

starters/docs/src/SearchField.tsx

@@ -15,17 +15,18 @@ export interface SearchFieldProps extends AriaSearchFieldProps {
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
   placeholder?: string;
+  autoFocus?: boolean;
 }
 
 export function SearchField(
-  { label, description, errorMessage, placeholder, ...props }: SearchFieldProps
+  { label, description, errorMessage, placeholder, autoFocus, ...props }: SearchFieldProps
 ) {
   return (
     (
       <AriaSearchField {...props}>
         {label && <Label>{label}</Label>}
         <Search size={18} />
-        <Input placeholder={placeholder} className="react-aria-Input inset" />
+        <Input placeholder={placeholder} className="react-aria-Input inset" autoFocus={autoFocus} />
         <Button className="clear-button"><X size={14} /></Button>
         {description && <Description>{description}</Description>}
         <FieldError>{errorMessage}</FieldError>

starters/tailwind/src/SearchField.tsx

@@ -14,18 +14,19 @@ export interface SearchFieldProps extends AriaSearchFieldProps {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
-  placeholder?: string
+  placeholder?: string;
+  autoFocus?: boolean;
 }
 
 export function SearchField(
-  { label, description, errorMessage, placeholder, ...props }: SearchFieldProps
+  { label, description, errorMessage, placeholder, autoFocus, ...props }: SearchFieldProps
 ) {
   return (
     <AriaSearchField {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 min-w-[40px] font-sans')}>
       {label && <Label>{label}</Label>}
       <FieldGroup>
         <SearchIcon aria-hidden className="w-4 h-4 ml-2 text-neutral-500 dark:text-neutral-400 forced-colors:text-[ButtonText] group-disabled:text-neutral-200 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText]" />
-        <Input placeholder={placeholder} className="pl-2 [&::-webkit-search-cancel-button]:hidden" />
+        <Input placeholder={placeholder} className="pl-2 [&::-webkit-search-cancel-button]:hidden" autoFocus={autoFocus} />
         <FieldButton className="mr-1 w-6 group-empty:invisible">
           <XIcon aria-hidden className="w-4 h-4" />
         </FieldButton>