fix(components): fix missing children prop

also remove unnessecary use of tsx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "3.26.1",
+  "version": "4.0.2",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/Carousel.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, RefAttributes, VFC } from 'react';
+import { HTMLAttributes, ReactNode, RefAttributes, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 
@@ -20,6 +20,6 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   scrollToAlignment?: 'center';
 }
 
-export const Carousel = findModuleExport((e: Export) => e.render?.toString().includes('setFocusedColumn:')) as VFC<
+export const Carousel = findModuleExport((e: Export) => e.render?.toString().includes('setFocusedColumn:')) as FC<
   CarouselProps & RefAttributes<HTMLDivElement>
 >;

src/components/ControlsList.ts

@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 
 export interface ControlsListProps {
   alignItems?: 'left' | 'right' | 'center';
   spacing?: 'standard' | 'extra';
+  children?: ReactNode;
 }
 
 export const ControlsList: FC<ControlsListProps> = findModuleExport(

src/components/Dialog.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, RefAttributes } from 'react';
+import { CSSProperties, FC, ReactNode, RefAttributes } from 'react';
 
 import { CommonUIModule } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
@@ -6,6 +6,7 @@ import { FooterLegendProps } from './FooterLegend';
 export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
   style?: CSSProperties;
   className?: string;
+  children?: ReactNode;
 }
 
 export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps {

src/components/Dropdown.ts

@@ -1,4 +1,4 @@
-import { ReactNode, VFC } from 'react';
+import { ReactNode, FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
 import { ItemProps } from './Item';
@@ -40,10 +40,10 @@ export interface DropdownProps {
 
 export const Dropdown = Object.values(CommonUIModule).find(
   (mod: any) => mod?.prototype?.SetSelectedOption && mod?.prototype?.BuildMenu,
-) as VFC<DropdownProps>;
+) as FC<DropdownProps>;
 
 export interface DropdownItemProps extends DropdownProps, ItemProps {}
 
 export const DropdownItem = Object.values(CommonUIModule).find((mod: any) =>
   mod?.toString()?.includes('"dropDownControlRef","description"'),
-) as VFC<DropdownItemProps>;
+) as FC<DropdownItemProps>;

src/components/Focusable.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, RefAttributes, VFC } from 'react';
+import { HTMLAttributes, ReactNode, RefAttributes, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
@@ -15,4 +15,4 @@ export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLe
 
 export const Focusable = findModuleExport((e: Export) =>
   e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'),
-) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;
+) as FC<FocusableProps & RefAttributes<HTMLDivElement>>;

src/components/Item.ts

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 export interface ItemProps {
   label?: ReactNode;
   description?: ReactNode;
+  children?: ReactNode;
   layout?: 'below' | 'inline';
   icon?: ReactNode;
   bottomSeparator?: 'standard' | 'thick' | 'none';

src/components/ProgressBar.ts

@@ -1,4 +1,4 @@
-import { ReactNode, VFC } from 'react';
+import { ReactNode, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 import { ItemProps } from './Item';
@@ -24,12 +24,12 @@ export interface ProgressBarWithInfoProps extends ProgressBarItemProps {
 
 export const ProgressBar = findModuleExport((e: Export) =>
   e?.toString()?.includes('.ProgressBar,"standard"=='),
-) as VFC<ProgressBarProps>;
+) as FC<ProgressBarProps>;
 
 export const ProgressBarWithInfo = findModuleExport((e: Export) =>
   e?.toString()?.includes('.ProgressBarFieldStatus},'),
-) as VFC<ProgressBarWithInfoProps>;
+) as FC<ProgressBarWithInfoProps>;
 
 export const ProgressBarItem = findModuleExport((e: Export) =>
   e?.toString()?.includes('"indeterminate","nTransitionSec"'),
-) as VFC<ProgressBarItemProps>;
+) as FC<ProgressBarItemProps>;

src/components/SidebarNavigation.ts

@@ -1,4 +1,4 @@
-import { ReactNode, VFC } from 'react';
+import { ReactNode, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 
@@ -25,4 +25,4 @@ export interface SidebarNavigationProps {
 
 export const SidebarNavigation = findModuleExport((e: Export) =>
   e?.toString()?.includes('"disableRouteReporting"'),
-) as VFC<SidebarNavigationProps>;
+) as FC<SidebarNavigationProps>;

src/components/TextField.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, HTMLAttributes, ReactNode, VFC } from 'react';
+import { ChangeEventHandler, HTMLAttributes, ReactNode, FC } from 'react';
 
 import { CommonUIModule, Module } from '../webpack';
 
@@ -25,4 +25,4 @@ export interface TextFieldProps extends HTMLAttributes<HTMLInputElement> {
 
 export const TextField = Object.values(CommonUIModule).find(
   (mod: Module) => mod?.validateUrl && mod?.validateEmail,
-) as VFC<TextFieldProps>;
+) as FC<TextFieldProps>;

src/custom-hooks/useQuickAccessVisible.ts

@@ -15,10 +15,10 @@ function getQuickAccessWindow(): Window | null {
  * @returns `true` if quick access menu is visible and `false` otherwise.
  *
  * @example
- * import { VFC, useEffect } from "react";
+ * import { FC, useEffect } from "react";
  * import { useQuickAccessVisible } from "decky-frontend-lib";
  *
- * export const PluginPanelView: VFC<{}> = ({ }) => {
+ * export const PluginPanelView: FC<{}> = ({ }) => {
  *   const isVisible = useQuickAccessVisible();
  *
  *   useEffect(() => {