Re-use types from AutoFill to InfiniteAutoFill

Author: tworrisb

src/components/AutoFill/AutoFill.mdx

@@ -48,7 +48,7 @@ Fills components vertically.
 function DemoComponent() {
   return (
     <div style={{ height: 1000, outline: '1px solid black' }}>
-      <AutoFill>
+      <AutoFill axis="y">
         <div style={{ padding: 15 }}>
           <div style={{ width: 50, outline: '1px solid red' }}>Child</div>
         </div>

src/components/AutoFill/AutoFill.tsx

@@ -18,7 +18,7 @@ type AutoFillChildrenProps = {
   ref: RefCallback<unknown>;
 };
 
-type AutoFillProps = {
+export type AutoFillProps = {
   children:
     | ReactElement<AutoFillChildrenProps>
     | ReadonlyArray<ReactElement<AutoFillChildrenProps>>;

src/components/InfiniteAutoFill/InfiniteAutoFill.mdx

@@ -6,7 +6,8 @@ import * as stories from './InfiniteAutoFill.stories';
 # InfiniteAutoFill
 
 Uses the AutoFill to repeat children to fill the parent element in given axis. In addition to that
-it adds the children one more time to the end of the list. This can be useful for example marquee's.
+it adds the children one more time to the end of the list. This can be useful for example marquees
+or infinite carousels.
 
 ## Reference
 
@@ -49,7 +50,7 @@ Fills components vertically + one extra.
 function DemoComponent() {
   return (
     <div style={{ height: 1000, outline: '1px solid black' }}>
-      <InfiniteAutoFill>
+      <InfiniteAutoFill axis="y">
         <div style={{ padding: 15 }}>
           <div style={{ width: 50, outline: '1px solid red' }}>Child</div>
         </div>

src/components/InfiniteAutoFill/InfiniteAutoFill.tsx

@@ -1,21 +1,12 @@
-import { type ReactElement, type RefCallback } from 'react';
+import { type ComponentProps, type ReactElement } from 'react';
 import { AutoFill } from '../../index.js';
 
-type InfiniteAutoFillChildrenProps = {
-  ref: RefCallback<unknown>;
-};
-
-type InfiniteAutoFillProps = {
-  children:
-    | ReactElement<InfiniteAutoFillChildrenProps>
-    | ReadonlyArray<ReactElement<InfiniteAutoFillChildrenProps>>;
-  axis?: 'x' | 'y';
-};
+type InfiniteAutoFillProps = ComponentProps<typeof AutoFill>;
 
 /**
  * Repeats children to fill the parent element in given axis.
  */
-export function InfiniteAutoFill({ children, axis = 'x' }: InfiniteAutoFillProps): ReactElement {
+export function InfiniteAutoFill({ children, axis }: InfiniteAutoFillProps): ReactElement {
   return (
     <>
       <AutoFill axis={axis}>{children}</AutoFill>