DNM: chore: TS explicit module boundary starters

starters/tailwind/src/AlertDialog.tsx

@@ -22,7 +22,7 @@ export function AlertDialog({
   onAction,
   children,
   ...props
-}: AlertDialogProps) {
+}: AlertDialogProps): ReactNode {
   return (
     <Dialog role="alertdialog" {...props}>
       {({ close }) => (

starters/tailwind/src/Autocomplete.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import {
   Autocomplete as AriaAutocomplete,
   AutocompleteProps as AriaAutocompleteProps,
@@ -24,7 +24,7 @@ export function Autocomplete<T extends object>({
   children,
   label,
   ...props
-}: AutocompleteProps<T>) {
+}: AutocompleteProps<T>): ReactNode {
   let { contains } = useFilter({ sensitivity: "base" });
   return (
     <div className="p-3 border-2 border-gray-200 rounded-xl dark:border-zinc-700">

starters/tailwind/src/Breadcrumbs.tsx

@@ -1,15 +1,15 @@
 import { ChevronRight } from 'lucide-react';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Breadcrumb as AriaBreadcrumb, Breadcrumbs as AriaBreadcrumbs, BreadcrumbProps, BreadcrumbsProps, LinkProps } from 'react-aria-components';
 import { twMerge } from 'tailwind-merge';
 import { Link } from './Link';
 import { composeTailwindRenderProps } from './utils';
 
-export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
+export function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>): ReactNode {
   return <AriaBreadcrumbs {...props} className={twMerge('flex gap-1', props.className)} />;
 }
 
-export function Breadcrumb(props: BreadcrumbProps & Omit<LinkProps, 'className'>) {
+export function Breadcrumb(props: BreadcrumbProps & Omit<LinkProps, 'className'>): ReactNode {
   return (
     <AriaBreadcrumb {...props} className={composeTailwindRenderProps(props.className, 'flex items-center gap-1')}>
       <Link variant="secondary" {...props} />

starters/tailwind/src/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { composeRenderProps, Button as RACButton, ButtonProps as RACButtonProps } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 import { focusRing } from './utils';
@@ -26,7 +26,7 @@ let button = tv({
   }
 });
 
-export function Button(props: ButtonProps) {
+export function Button(props: ButtonProps): ReactNode {
   return (
     <RACButton
       {...props}

starters/tailwind/src/Calendar.tsx

@@ -1,5 +1,5 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   Calendar as AriaCalendar,
   CalendarGridHeader as AriaCalendarGridHeader,
@@ -37,7 +37,7 @@ export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarPro
 
 export function Calendar<T extends DateValue>(
   { errorMessage, ...props }: CalendarProps<T>
-) {
+): ReactNode {
   return (
     <AriaCalendar {...props}>
       <CalendarHeader />
@@ -52,7 +52,7 @@ export function Calendar<T extends DateValue>(
   );
 }
 
-export function CalendarHeader() {
+export function CalendarHeader(): ReactNode {
   let {direction} = useLocale();
 
   return (
@@ -68,7 +68,7 @@ export function CalendarHeader() {
   );
 }
 
-export function CalendarGridHeader() {
+export function CalendarGridHeader(): ReactNode {
   return (
     <AriaCalendarGridHeader>
       {(day) => (

starters/tailwind/src/Checkbox.tsx

@@ -12,7 +12,7 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'childr
   errorMessage?: string | ((validation: ValidationResult) => string);
 }
 
-export function CheckboxGroup(props: CheckboxGroupProps) {
+export function CheckboxGroup(props: CheckboxGroupProps): ReactNode {
   return (
     <AriaCheckboxGroup {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-2')}>
       <Label>{props.label}</Label>
@@ -52,7 +52,7 @@ const boxStyles = tv({
 
 const iconStyles = 'w-4 h-4 text-white group-disabled:text-gray-400 dark:text-slate-900 dark:group-disabled:text-slate-600 forced-colors:text-[HighlightText]';
 
-export function Checkbox(props: CheckboxProps) {
+export function Checkbox(props: CheckboxProps): ReactNode {
   return (
     <AriaCheckbox {...props} className={composeRenderProps(props.className, (className, renderProps) => checkboxStyles({...renderProps, className}))}>
       {({isSelected, isIndeterminate, ...renderProps}) => (

starters/tailwind/src/ColorArea.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   ColorArea as AriaColorArea,
   ColorAreaProps as AriaColorAreaProps
@@ -8,7 +8,7 @@ import { ColorThumb } from './ColorThumb';
 
 export interface ColorAreaProps extends AriaColorAreaProps {}
 
-export function ColorArea(props: ColorAreaProps) {
+export function ColorArea(props: ColorAreaProps): ReactNode {
   return (
     <AriaColorArea
       {...props}

starters/tailwind/src/ColorField.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   ColorField as AriaColorField,
   ColorFieldProps as AriaColorFieldProps,
@@ -25,7 +25,7 @@ export interface ColorFieldProps extends AriaColorFieldProps {
 
 export function ColorField(
   { label, description, errorMessage, ...props }: ColorFieldProps
-) {
+): ReactNode {
   return (
     <AriaColorField {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1')}>
       {label && <Label>{label}</Label>}

starters/tailwind/src/ColorPicker.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {Button, ColorPicker as AriaColorPicker, ColorPickerProps as AriaColorPickerProps, DialogTrigger} from 'react-aria-components';
 import {ColorSwatch} from './ColorSwatch';
 import {ColorArea} from './ColorArea';
@@ -19,7 +19,7 @@ export interface ColorPickerProps extends AriaColorPickerProps {
   children?: React.ReactNode;
 }
 
-export function ColorPicker({ label, children, ...props }: ColorPickerProps) {
+export function ColorPicker({ label, children, ...props }: ColorPickerProps): ReactNode {
   return (
     <AriaColorPicker {...props}>
       <DialogTrigger>

starters/tailwind/src/ColorSlider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   ColorSlider as AriaColorSlider,
   ColorSliderProps as AriaColorSliderProps,
@@ -27,7 +27,7 @@ interface ColorSliderProps extends AriaColorSliderProps {
   label?: string;
 }
 
-export function ColorSlider({ label, ...props }: ColorSliderProps) {
+export function ColorSlider({ label, ...props }: ColorSliderProps): ReactNode {
   return (
     <AriaColorSlider {...props} className={composeTailwindRenderProps(props.className, 'orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-56')}>
       <Label>{label}</Label>

starters/tailwind/src/ColorSwatch.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {ColorSwatch as AriaColorSwatch, ColorSwatchProps} from 'react-aria-components';
 import { composeTailwindRenderProps } from './utils';
 
-export function ColorSwatch(props: ColorSwatchProps) {
+export function ColorSwatch(props: ColorSwatchProps): ReactNode {
   return (
-    <AriaColorSwatch 
+    <AriaColorSwatch
       {...props}
       className={composeTailwindRenderProps(props.className, 'w-8 h-8 rounded-xs border border-black/10')}
       style={({color}) => ({

starters/tailwind/src/ColorSwatchPicker.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   ColorSwatchPicker as AriaColorSwatchPicker,
   ColorSwatchPickerItem as AriaColorSwatchPickerItem,
@@ -11,7 +11,7 @@ import {tv} from 'tailwind-variants';
 
 export function ColorSwatchPicker(
   { children, ...props }: Omit<ColorSwatchPickerProps, 'layout'>
-) {
+): ReactNode {
   return (
     <AriaColorSwatchPicker {...props} className={composeTailwindRenderProps(props.className, 'flex gap-1')}>
       {children}

starters/tailwind/src/ColorThumb.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {ColorThumb as AriaColorThumb, ColorThumbProps} from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
@@ -17,7 +17,7 @@ const thumbStyles = tv({
   }
 });
 
-export function ColorThumb(props: ColorThumbProps) {
+export function ColorThumb(props: ColorThumbProps): ReactNode {
   return (
     <AriaColorThumb
       {...props}

starters/tailwind/src/ColorWheel.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {ColorWheel as AriaColorWheel, ColorWheelProps as AriaColorWheelProps, ColorWheelTrack} from 'react-aria-components';
 import { ColorThumb } from './ColorThumb';
 
 export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'outerRadius' | 'innerRadius'> {}
 
-export function ColorWheel(props: ColorWheelProps) {
+export function ColorWheel(props: ColorWheelProps): ReactNode {
   return (
     <AriaColorWheel {...props} outerRadius={100} innerRadius={74}>
       <ColorWheelTrack

starters/tailwind/src/ComboBox.tsx

@@ -1,5 +1,5 @@
 import { ChevronDown } from 'lucide-react';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   ComboBox as AriaComboBox,
   ComboBoxProps as AriaComboBoxProps,
@@ -22,7 +22,7 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
 
 export function ComboBox<T extends object>(
   { label, description, errorMessage, children, items, ...props }: ComboBoxProps<T>
-) {
+): ReactNode {
   return (
     <AriaComboBox {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1')}>
       <Label>{label}</Label>
@@ -43,10 +43,10 @@ export function ComboBox<T extends object>(
   );
 }
 
-export function ComboBoxItem(props: ListBoxItemProps) {
+export function ComboBoxItem(props: ListBoxItemProps): ReactNode {
   return <DropdownItem {...props} />;
 }
 
-export function ComboBoxSection<T extends object>(props: DropdownSectionProps<T>) {
+export function ComboBoxSection<T extends object>(props: DropdownSectionProps<T>): ReactNode {
   return <DropdownSection {...props} />;
 }

starters/tailwind/src/DateField.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   DateField as AriaDateField,
   DateFieldProps as AriaDateFieldProps,
@@ -20,7 +20,7 @@ export interface DateFieldProps<T extends DateValue> extends AriaDateFieldProps<
 
 export function DateField<T extends DateValue>(
   { label, description, errorMessage, ...props }: DateFieldProps<T>
-) {
+): ReactNode {
   return (
     <AriaDateField {...props} className={composeTailwindRenderProps(props.className, 'flex flex-col gap-1')}>
       {label && <Label>{label}</Label>}
@@ -46,7 +46,7 @@ const segmentStyles = tv({
   }
 });
 
-export function DateInput(props: Omit<DateInputProps, 'children'>) {
+export function DateInput(props: Omit<DateInputProps, 'children'>): ReactNode {
   return (
     <AriaDateInput className={renderProps => fieldGroupStyles({...renderProps, class: 'block min-w-[150px] px-2 py-1.5 text-sm'})} {...props}>
       {(segment) => <DateSegment segment={segment} className={segmentStyles} />}

starters/tailwind/src/DatePicker.tsx

@@ -1,5 +1,5 @@
 import { CalendarIcon } from 'lucide-react';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   DatePicker as AriaDatePicker,
   DatePickerProps as AriaDatePickerProps,
@@ -23,7 +23,7 @@ export interface DatePickerProps<T extends DateValue>
 
 export function DatePicker<T extends DateValue>(
   { label, description, errorMessage, ...props }: DatePickerProps<T>
-) {
+): ReactNode {
   return (
     <AriaDatePicker {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1')}>
       {label && <Label>{label}</Label>}

starters/tailwind/src/DateRangePicker.tsx

@@ -1,5 +1,5 @@
 import { CalendarIcon } from 'lucide-react';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   DateRangePicker as AriaDateRangePicker,
   DateRangePickerProps as AriaDateRangePickerProps,
@@ -23,7 +23,7 @@ export interface DateRangePickerProps<T extends DateValue>
 
 export function DateRangePicker<T extends DateValue>(
   { label, description, errorMessage, ...props }: DateRangePickerProps<T>
-) {
+): ReactNode {
   return (
     <AriaDateRangePicker {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1')}>
       {label && <Label>{label}</Label>}

starters/tailwind/src/Dialog.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { DialogProps, Dialog as RACDialog } from 'react-aria-components';
 import { twMerge } from 'tailwind-merge';
 
-export function Dialog(props: DialogProps) {
+export function Dialog(props: DialogProps): ReactNode {
   return <RACDialog {...props} className={twMerge('outline outline-0 p-6 [[data-placement]>&]:p-4 max-h-[inherit] overflow-auto relative', props.className)} />;
 }

starters/tailwind/src/Disclosure.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { ReactNode, useContext } from "react";
 import {
   Disclosure as AriaDisclosure,
   DisclosureGroup as AriaDisclosureGroup,
@@ -54,7 +54,7 @@ export interface DisclosureProps extends AriaDisclosureProps {
   children: React.ReactNode;
 }
 
-export function Disclosure({ children, ...props }: DisclosureProps) {
+export function Disclosure({ children, ...props }: DisclosureProps): ReactNode {
   let isInGroup = useContext(DisclosureGroupStateContext) !== null;
   return (
     <AriaDisclosure
@@ -70,7 +70,7 @@ export interface DisclosureHeaderProps {
   children: React.ReactNode;
 }
 
-export function DisclosureHeader({ children }: DisclosureHeaderProps) {
+export function DisclosureHeader({ children }: DisclosureHeaderProps): ReactNode {
   let { isExpanded } = useContext(DisclosureStateContext)!;
   let isInGroup = useContext(DisclosureGroupStateContext) !== null;
   return (
@@ -94,7 +94,7 @@ export interface DisclosurePanelProps extends AriaDisclosurePanelProps {
   children: React.ReactNode;
 }
 
-export function DisclosurePanel({ children, ...props }: DisclosurePanelProps) {
+export function DisclosurePanel({ children, ...props }: DisclosurePanelProps): ReactNode {
   return (
     <AriaDisclosurePanel {...props} className={composeTailwindRenderProps(props.className, 'group-data-[expanded]:px-4 group-data-[expanded]:py-2')}>
       {children}
@@ -106,7 +106,7 @@ export interface DisclosureGroupProps extends AriaDisclosureGroupProps {
   children: React.ReactNode;
 }
 
-export function DisclosureGroup({ children, ...props }: DisclosureGroupProps) {
+export function DisclosureGroup({ children, ...props }: DisclosureGroupProps): ReactNode   {
   return (
     <AriaDisclosureGroup {...props} className={composeTailwindRenderProps(props.className, 'border border-gray-200 dark:border-zinc-600 rounded-lg')}>
       {children}