fix react 19 types

packages/actify/package.json

@@ -32,8 +32,8 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "autoprefixer": "^10.4.19",
@@ -52,6 +52,10 @@
     "tslib": "^2.6.2",
     "typescript": "^5.4.5"
   },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
+  },
   "dependencies": {
     "@floating-ui/react": "^0.26.13",
     "clsx": "^2.1.1",

packages/actify/src/components/Accordion/Accordion.tsx

@@ -29,6 +29,7 @@ const AccordionRoot = (props: AccordionRootProps) => {
             isValidElement(child) &&
             cloneElement(child, {
               index,
+              // @ts-ignore
               ...child.props
             })
         )}

packages/actify/src/components/Accordion/AccordionItem.tsx

@@ -21,6 +21,7 @@ const AccordionItem = (props: AccordionItemProps) => {
           isValidElement(child) &&
           cloneElement(child, {
             index,
+            // @ts-ignore
             ...child.props
           })
       )}

packages/actify/src/components/BottomAppBar/BottomAppBar.tsx

@@ -38,6 +38,7 @@ const Icons = ({ children }: { children: React.ReactNode }) => {
           isValidElement(child) &&
           index <= 3 &&
           cloneElement(child, {
+            // @ts-ignore
             ...child.props,
             className: 'cursor-pointer'
           })

packages/actify/src/components/BottomSheets/BottomSheetsContent.tsx

@@ -8,7 +8,7 @@ import { tv } from 'tailwind-variants'
 import { useBottomSheets } from './BottomSheetsContext'
 
 const scrim = tv({
-  base: 'z-50 bg-black/40 dark:bg-[rgba(3,3,3,.8)]'
+  base: 'z-50 bg-[rgba(0,0,0,0.32)]'
 })
 
 const rootVariants = tv({
@@ -65,6 +65,7 @@ const Content = ({
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
+          // @ts-ignore
           onClick={() => setOpen?.(false)}
           className={rootVariants({ className })}
         >
@@ -78,8 +79,9 @@ const Content = ({
             exit={{
               transform: 'translateY(100%)'
             }}
+            // @ts-ignore
             className={innerVariants()}
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e: Event) => e.stopPropagation()}
           >
             <div className="inline-flex h-9 w-full cursor-grab flex-col items-center justify-start gap-3 p-4 bg-surface rounded-t-[100px]">
               <div className="h-1 w-8 bg-outline/40 rounded-[100px]"></div>
@@ -92,7 +94,7 @@ const Content = ({
       )}
     </AnimatePresence>,
     container
-  )
+  ) as React.ReactNode
 }
 
 export { Content }

packages/actify/src/components/Carousel/CarouselContent.tsx

@@ -1,9 +1,11 @@
 'use client'
-import { wrap } from 'popmotion'
+
+import { AnimatePresence, motion } from 'framer-motion'
+import React, { Children, isValidElement, useEffect } from 'react'
+
 import { twMerge } from 'tailwind-merge'
 import { useCarousel } from './CarouselContext'
-import { motion, AnimatePresence } from 'framer-motion'
-import React, { Children, useEffect, isValidElement } from 'react'
+import { wrap } from 'popmotion'
 
 const variants = {
   enter: (direction: number) => {
@@ -54,7 +56,9 @@ const CarouselContent = ({ children }: React.ComponentProps<'div'>) => {
           if (current == index) {
             return (
               <MotionComponent
+                // @ts-ignore
                 {...child.props}
+                // @ts-ignore
                 className={twMerge(child.props.className, 'absolute')}
                 variants={variants}
                 key={page}

packages/actify/src/components/Chips/Chip.tsx

@@ -15,6 +15,7 @@ const Chip = (props: ChipProps) => {
           isValidElement(child) &&
           cloneElement(child, {
             index,
+            // @ts-ignore
             ...child.props
           })
       )}

packages/actify/src/components/Chips/FilterChip.tsx

@@ -352,6 +352,7 @@ const FilterChip = (props: FilterChipProps) => {
     >
       <motion.div
         layout
+        // @ts-ignore
         onClick={handleClick}
         className={container({ selected, disabled })}
       >

packages/actify/src/components/Field/Field.tsx

@@ -70,6 +70,7 @@ const Field = (props: FieldProps) => {
           easings: [cubicBezier(0.2, 0, 0, 1)]
         }}
         aria-hidden={!visible}
+        // @ts-ignore
         className={clsx(
           styles['label'],
           !visible && styles['visible'],

packages/actify/src/components/Lists/ListGroup.tsx

@@ -46,6 +46,7 @@ const ListGroup = (props: ListItemProps) => {
       {hovered && (
         <motion.div
           layoutId={layoutId}
+          // @ts-ignore
           className="h-14 absolute inset-0 bg-surface-variant z-[-1]"
         />
       )}
@@ -60,6 +61,7 @@ const ListGroup = (props: ListItemProps) => {
             (child) =>
               isValidElement(child) &&
               cloneElement(child, {
+                // @ts-ignore
                 ...child.props
               })
           )}

packages/actify/src/components/Lists/ListItem.tsx

@@ -63,6 +63,7 @@ const ListItem = (props: ListItemProps) => {
         <motion.div
           layoutId={layoutId}
           transition={transition}
+          // @ts-ignore
           className="absolute inset-0 bg-surface-variant z-[-1]"
         />
       )}

packages/actify/src/components/Lists/ListItemLink.tsx

@@ -47,6 +47,7 @@ const ListItemLink = (props: ListItemProps) => {
         {children == current && (
           <motion.div
             layoutId={layoutId}
+            // @ts-ignore
             className="absolute inset-0 bg-secondary/25 z-[-1]"
           />
         )}

packages/actify/src/components/NavigationDrawer/DrawerActivator.tsx

@@ -26,6 +26,7 @@ const DrawerActivator = (props: DrawerActivatorProps) => {
     return cloneElement(children, {
       ref,
       ...rest,
+      // @ts-ignore
       ...children.props,
       role: 'button',
       onClick: handleClick

packages/actify/src/components/NavigationDrawer/DrawerContent.tsx

@@ -8,7 +8,7 @@ import { tv } from 'tailwind-variants'
 import { useDrawer } from './DrawerContext'
 
 const scrim = tv({
-  base: 'z-50 bg-black/40'
+  base: 'z-50 bg-[rgba(0,0,0,0.32)]'
 })
 
 const rootVariants = tv({
@@ -159,10 +159,12 @@ const DrawerContent = ({ style, className, children }: DrawerContentProps) => {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
+          // @ts-ignore
           className={rootVariants({ open })}
         >
           <motion.div
             {...getAnimationProps()}
+            // @ts-ignore
             className={contentVariants({ placement, className })}
           >
             {children}
@@ -173,7 +175,7 @@ const DrawerContent = ({ style, className, children }: DrawerContentProps) => {
       )}
     </AnimatePresence>,
     container
-  )
+  ) as React.ReactNode
 }
 
 export { DrawerContent }

packages/actify/src/components/Ripple/Ripple.tsx

@@ -79,8 +79,8 @@ const Ripple = (props: RippleProps) => {
   const rippleSize = useRef('')
   const rippleScale = useRef('')
   const initialSize = useRef(0)
-  const growAnimation = useRef<Animation>()
-  const rippleStartEvent = useRef<PointerEvent>()
+  const growAnimation = useRef<Animation>(null)
+  const rippleStartEvent = useRef<PointerEvent>(null)
   const checkBoundsAfterContextMenu = useRef(false)
 
   const isTouch = ({ pointerType }: PointerEvent) => {
@@ -124,7 +124,7 @@ const Ripple = (props: RippleProps) => {
     return { x: pageX - documentX, y: pageY - documentY }
   }
 
-  const getTranslationCoordinates = (positionEvent?: Event) => {
+  const getTranslationCoordinates = (positionEvent?: Event | null) => {
     const { height, width } = ref.current!.getBoundingClientRect()
     // end in the center
     const endPoint = {
@@ -151,7 +151,7 @@ const Ripple = (props: RippleProps) => {
     return { startPoint, endPoint }
   }
 
-  const startPressAnimation = (positionEvent?: Event) => {
+  const startPressAnimation = (positionEvent?: Event | null) => {
     if (!ref.current) {
       return
     }
@@ -183,7 +183,7 @@ const Ripple = (props: RippleProps) => {
   }
 
   const endPressAnimation = async () => {
-    rippleStartEvent.current = undefined
+    rippleStartEvent.current = null
     state.current = State.INACTIVE
     const animation = growAnimation.current
     let pressAnimationPlayState = Infinity

packages/actify/src/components/SideSheets/SideSheetsContent.tsx

@@ -8,7 +8,7 @@ import { tv } from 'tailwind-variants'
 import { useSideSheets } from './SideSheetsContext'
 
 const scrim = tv({
-  base: 'z-50 bg-black/40 dark:bg-[rgba(3,3,3,.8)]'
+  base: 'z-50 bg-[rgba(0,0,0,0.32)]'
 })
 
 const rootVariants = tv({
@@ -65,6 +65,7 @@ const Content = (props: ContentProps) => {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
+          // @ts-ignore
           onClick={() => setOpen?.(false)}
           className={rootVariants({ className })}
         >
@@ -78,16 +79,17 @@ const Content = (props: ContentProps) => {
             exit={{
               transform: 'translateX(100%)'
             }}
+            // @ts-ignore
             className={innerVariants()}
-            onClick={(e) => e.stopPropagation()}
+            onClick={(e: Event) => e.stopPropagation()}
           >
             {children}
           </motion.div>
         </motion.div>
       )}
     </AnimatePresence>,
     container
-  )
+  ) as React.ReactNode
 }
 
 export { Content }

packages/actify/src/components/Slot/Slot.tsx

@@ -17,6 +17,7 @@ const Slot = (props: SlotProps) => {
 
   if (slottable) {
     // the new element to render is the one passed as a child of `Slottable`
+    // @ts-ignore
     const newElement = slottable.props.children as React.ReactNode
 
     const newChildren = childrenArray.map((child) => {
@@ -26,7 +27,8 @@ const Slot = (props: SlotProps) => {
         if (React.Children.count(newElement) > 1)
           return React.Children.only(null)
         return React.isValidElement(newElement)
-          ? (newElement.props.children as React.ReactNode)
+          ? // @ts-ignore
+            (newElement.props.children as React.ReactNode)
           : null
       } else {
         return child
@@ -65,6 +67,7 @@ const SlotClone = (props: SlotCloneProps) => {
 
   if (React.isValidElement(children)) {
     return React.cloneElement(children, {
+      // @ts-ignore
       ...mergeProps(slotProps, children.props),
       // @ts-ignore
       ref: forwardedRef

packages/actify/src/components/Tabs/Tab.tsx

@@ -60,6 +60,7 @@ const Tab = (props: TabProps) => {
       {activeTabIndex == index && (
         <motion.div
           layoutId={layoutId}
+          // @ts-ignore
           className="absolute -z-10 w-full bottom-0"
         >
           <div className="h-0.5 rounded-lg w-full bg-primary"></div>

packages/actify/src/components/Tabs/TabsBody.tsx

@@ -21,6 +21,7 @@ const TabsBody = (props: TabsBodyProps) => {
           isValidElement(child) &&
           cloneElement(child, {
             index,
+            // @ts-ignore
             ...child.props
           })
       )}

packages/actify/src/components/Tabs/TabsHeader.tsx

@@ -27,6 +27,7 @@ const TabsHeader = (props: TabsHeaderProps) => {
             isValidElement(child) &&
             cloneElement(child, {
               index,
+              // @ts-ignore
               ...child.props
             })
         )}