Remove most of Radix UI

src-web/components/core/Stacks.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames';
-import type { ComponentType, HTMLAttributes, ReactNode } from 'react';
+import type { ComponentType, ForwardedRef, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
 
 const gapClasses = {
   0: 'gap-0',
@@ -15,66 +16,70 @@ interface HStackProps extends BaseStackProps {
   children?: ReactNode;
 }
 
-export function HStack({ className, space, children, ...props }: HStackProps) {
+export const HStack = forwardRef(function HStack(
+  { className, space, children, ...props }: HStackProps,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref: ForwardedRef<any>,
+) {
   return (
     <BaseStack
-      direction="row"
+      ref={ref}
       className={classnames(className, 'flex-row', space && gapClasses[space])}
       {...props}
     >
       {children}
     </BaseStack>
   );
-}
+});
 
 export type VStackProps = BaseStackProps & {
   children: ReactNode;
 };
 
-export function VStack({ className, space, children, ...props }: VStackProps) {
+export const VStack = forwardRef(function VStack(
+  { className, space, children, ...props }: VStackProps,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref: ForwardedRef<any>,
+) {
   return (
     <BaseStack
-      direction="col"
-      className={classnames(className, 'w-full h-full', space && gapClasses[space])}
+      ref={ref}
+      className={classnames(className, 'flex-col', space && gapClasses[space])}
       {...props}
     >
       {children}
     </BaseStack>
   );
-}
+});
 
 type BaseStackProps = HTMLAttributes<HTMLElement> & {
   as?: ComponentType | 'ul';
   space?: keyof typeof gapClasses;
   alignItems?: 'start' | 'center';
   justifyContent?: 'start' | 'center' | 'end';
-  direction?: 'row' | 'col';
 };
 
-function BaseStack({
-  className,
-  direction,
-  alignItems,
-  justifyContent,
-  children,
-  as,
-}: BaseStackProps) {
+const BaseStack = forwardRef(function BaseStack(
+  { className, alignItems, justifyContent, children, as, ...props }: BaseStackProps,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ref: ForwardedRef<any>,
+) {
   const Component = as ?? 'div';
   return (
     <Component
+      ref={ref}
       className={classnames(
         className,
         'flex',
-        direction === 'row' && 'flex-row',
-        direction === 'col' && 'flex-col',
         alignItems === 'center' && 'items-center',
         alignItems === 'start' && 'items-start',
         justifyContent === 'start' && 'justify-start',
         justifyContent === 'center' && 'justify-center',
         justifyContent === 'end' && 'justify-end',
       )}
+      {...props}
     >
       {children}
     </Component>
   );
-}
+});