diff --git a/bun.lockb b/bun.lockb
index 628c73a8..49906305 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/doc-how.tsx b/components/doc-how.tsx
index 3a8e303d..20e78929 100644
--- a/components/doc-how.tsx
+++ b/components/doc-how.tsx
@@ -108,7 +108,7 @@ const Tab = ({ children, ...props }: TabProps) => {
     >
       {({ isSelected }) => (
         <>
-          {children}
+          {children as React.ReactNode}
           {isSelected && (
             <motion.span
               layoutId="current_indicator"
diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
index 8768b4bd..3bed4cfa 100644
--- a/components/docs/generated/previews.ts
+++ b/components/docs/generated/previews.ts
@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from "react"
+import React from 'react';
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field/date-field-demo": {
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index 21db1968..7a6655f4 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { type ReactNode } from "react"
 
 import { IconCheck, IconMinus } from "justd-icons"
 import {
@@ -16,9 +15,8 @@ import { tv } from "tailwind-variants"
 import { Description, FieldError, Label } from "./field"
 import { cn, cr, ctr } from "./primitive"
 
-interface CheckboxGroupProps extends Omit<CheckboxGroupPrimitiveProps, "children"> {
+interface CheckboxGroupProps extends CheckboxGroupPrimitiveProps {
   label?: string
-  children?: ReactNode
   description?: string
   errorMessage?: string | ((validation: ValidationResult) => string)
 }
@@ -27,7 +25,7 @@ const CheckboxGroup = (props: CheckboxGroupProps) => {
   return (
     <CheckboxGroupPrimitive {...props} className={ctr(props.className, "flex flex-col gap-y-2")}>
       <Label>{props.label}</Label>
-      <>{props.children}</>
+      <>{props.children as React.ReactNode}</>
       {props.description && <Description className="block">{props.description}</Description>}
       <FieldError>{props.errorMessage}</FieldError>
     </CheckboxGroupPrimitive>
@@ -93,7 +91,7 @@ const Checkbox = ({ className, ...props }: CheckboxProps) => {
 
           <div className="flex flex-col gap-1">
             <>
-              {props.label ? <Label>{props.label}</Label> : props.children}
+              {props.label ? <Label>{props.label}</Label> : (props.children as React.ReactNode)}
               {props.description && <Description>{props.description}</Description>}
             </>
           </div>
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 511dcd60..7035d430 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -41,7 +41,7 @@ const dialogStyles = tv({
 const { root, header, description, body, footer, closeIndicator } = dialogStyles()
 
 const Dialog = ({ role, className, ...props }: DialogProps) => {
-  return <DialogPrimitive {...props} role={role ?? "dialog"} className={root({ className })} />
+  return <DialogPrimitive role={role ?? "dialog"} className={root({ className })} {...props} />
 }
 
 const Trigger = (props: ButtonPrimitiveProps) => (
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index 40bb9c3b..020fe545 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -72,6 +72,7 @@ interface DrawerOverlayPrimitiveProps
   "aria-label"?: DialogProps["aria-label"]
   "aria-labelledby"?: DialogProps["aria-labelledby"]
   role?: DialogProps["role"]
+  children?: React.ReactNode
 }
 
 const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitiveProps) => {
@@ -178,7 +179,7 @@ const DrawerPrimitive = (props: DrawerPrimitiveProps) => {
         transformOrigin: "center 0"
       }}
     >
-      <AnimatePresence>{isOpen && <>{props.children}</>}</AnimatePresence>
+      <AnimatePresence>{isOpen && <>{props.children as React.ReactNode}</>}</AnimatePresence>
     </motion.div>
   )
 }
diff --git a/components/ui/grid-list.tsx b/components/ui/grid-list.tsx
index 65c7ec03..45f54084 100644
--- a/components/ui/grid-list.tsx
+++ b/components/ui/grid-list.tsx
@@ -67,7 +67,7 @@ const Item = ({ className, ...props }: GridListItemProps) => {
           {selectionMode === "multiple" && selectionBehavior === "toggle" && (
             <Checkbox className="-mr-2" slot="selection" />
           )}
-          {props.children}
+          {props.children as React.ReactNode}
         </>
       )}
     </GridListItem>
diff --git a/components/ui/meter.tsx b/components/ui/meter.tsx
index 2732f04d..60eda47f 100644
--- a/components/ui/meter.tsx
+++ b/components/ui/meter.tsx
@@ -4,13 +4,15 @@ import * as React from "react"
 
 import { motion } from "framer-motion"
 import { IconTriangleInfo } from "justd-icons"
-import type { MeterProps as AriaMeterProps } from "react-aria-components"
-import { Meter as MeterPrimitive } from "react-aria-components"
+import {
+  Meter as MeterPrimitive,
+  type MeterProps as MeterPrimitiveProps
+} from "react-aria-components"
 
 import { Label } from "./field"
 import { ctr } from "./primitive"
 
-export interface MeterProps extends AriaMeterProps {
+export interface MeterProps extends MeterPrimitiveProps {
   label?: string
 }
 
diff --git a/components/ui/modal.tsx b/components/ui/modal.tsx
index 3d34061e..5b4d8c3f 100644
--- a/components/ui/modal.tsx
+++ b/components/ui/modal.tsx
@@ -2,13 +2,9 @@
 
 import * as React from "react"
 
-import type {
-  DialogTriggerProps,
-  ModalOverlayProps as ModalOverlayPrimitiveProps
-} from "react-aria-components"
+import type { DialogProps, DialogTriggerProps, ModalOverlayProps } from "react-aria-components"
 import {
-  type DialogProps,
-  DialogTrigger as DialogTriggerPrimitive,
+  DialogTrigger,
   Modal as ModalPrimitive,
   ModalOverlay as ModalOverlayPrimitive
 } from "react-aria-components"
@@ -73,13 +69,13 @@ const modalContentStyles = tv({
 })
 
 type ModalProps = DialogTriggerProps
-const Modal = ({ children, ...props }: ModalProps) => {
-  return <DialogTriggerPrimitive {...props}>{children}</DialogTriggerPrimitive>
+const Modal = (props: ModalProps) => {
+  return <DialogTrigger {...props} />
 }
 
 interface ModalContentProps
   extends Omit<React.ComponentProps<typeof Modal>, "children">,
-    Omit<ModalOverlayPrimitiveProps, "className">,
+    Omit<ModalOverlayProps, "className">,
     VariantProps<typeof modalContentStyles> {
   "aria-label"?: DialogProps["aria-label"]
   "aria-labelledby"?: DialogProps["aria-labelledby"]
@@ -87,8 +83,8 @@ interface ModalContentProps
   closeButton?: boolean
   isBlurred?: boolean
   classNames?: {
-    overlay?: ModalOverlayPrimitiveProps["className"]
-    content?: ModalOverlayPrimitiveProps["className"]
+    overlay?: ModalOverlayProps["className"]
+    content?: ModalOverlayProps["className"]
   }
 }
 
diff --git a/components/ui/radio.tsx b/components/ui/radio.tsx
index 653a31b5..54cb1c08 100644
--- a/components/ui/radio.tsx
+++ b/components/ui/radio.tsx
@@ -2,19 +2,18 @@
 
 import * as React from "react"
 
-import {
-  Radio as RadioPrimitive,
-  RadioGroup as RadioGroupPrimitive,
-  type RadioGroupProps as RACRadioGroupProps,
-  type RadioProps as RadioPrimitiveProps,
-  type ValidationResult
+import type {
+  RadioGroupProps as RadioGroupPrimitiveProps,
+  RadioProps as RadioPrimitiveProps,
+  ValidationResult
 } from "react-aria-components"
+import { Radio as RadioPrimitive, RadioGroup as RadioGroupPrimitive } from "react-aria-components"
 import { tv } from "tailwind-variants"
 
 import { Description, FieldError, Label } from "./field"
 import { ctr } from "./primitive"
 
-interface RadioGroupProps extends Omit<RACRadioGroupProps, "children"> {
+interface RadioGroupProps extends Omit<RadioGroupPrimitiveProps, "children"> {
   label?: string
   children?: React.ReactNode
   description?: string
@@ -79,7 +78,7 @@ const Radio = ({ description, ...props }: RadioProps) => {
               })}
             />
             <div className="flex flex-col gap-1">
-              <>{props.children}</>
+              {props.children as React.ReactNode}
               {description && <Description className="block">{description}</Description>}
             </div>
           </div>
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 52412e88..1b71be68 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -53,7 +53,7 @@ const Select = <T extends object>({
   return (
     <SelectPrimitive {...props} className={ctr(className, "group flex w-full flex-col gap-y-1.5")}>
       {label && <Label>{label}</Label>}
-      <>{children}</>
+      <>{children as React.ReactNode}</>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
     </SelectPrimitive>
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index f5de7123..282d3d80 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -132,7 +132,7 @@ const SheetContent = ({
         <Dialog role={role} aria-label={props["aria-label"] ?? undefined} className="h-full">
           {(values) => (
             <>
-              {props.children}
+              {props.children as React.ReactNode}
               {closeButton && (
                 <Dialog.CloseIndicator
                   className="top-2.5 right-2.5"
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index 1e450fc8..78fd7441 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -128,7 +128,7 @@ interface TableColumnProps extends ColumnProps {
   isResizable?: boolean
 }
 
-const TableColumn = ({ children, isResizable = false, className, ...props }: TableColumnProps) => {
+const TableColumn = ({ isResizable = false, className, ...props }: TableColumnProps) => {
   return (
     <Column
       {...props}
@@ -140,7 +140,7 @@ const TableColumn = ({ children, isResizable = false, className, ...props }: Tab
       {({ allowsSorting, sortDirection, isHovered }) => (
         <div className="flex [&_[data-slot=icon]]:shrink-0 items-center gap-2">
           <>
-            {children}
+            {props.children as React.ReactNode}
             {allowsSorting && (
               <>
                 <span className={cellIcon({ className: isHovered ? "bg-secondary-fg/10" : "" })}>
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index 813cc9be..293e6f1a 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -99,7 +99,7 @@ const Tab = ({ children, ...props }: TabProps) => {
     >
       {({ isSelected }) => (
         <>
-          {children}
+          {children as React.ReactNode}
           {isSelected && (
             <motion.span
               className={cn(
diff --git a/components/ui/tag-group.tsx b/components/ui/tag-group.tsx
index c7d9b233..77953669 100644
--- a/components/ui/tag-group.tsx
+++ b/components/ui/tag-group.tsx
@@ -130,8 +130,8 @@ interface TagProps extends TagPrimitiveProps {
   shape?: Shape
 }
 
-const TagItem = ({ children, className, intent, shape, ...props }: TagProps) => {
-  const textValue = typeof children === "string" ? children : undefined
+const TagItem = ({ className, intent, shape, ...props }: TagProps) => {
+  const textValue = typeof props.children === "string" ? props.children : undefined
   const groupContext = React.useContext(TagGroupContext)
 
   return (
@@ -155,7 +155,7 @@ const TagItem = ({ children, className, intent, shape, ...props }: TagProps) =>
       {({ allowsRemoving }) => {
         return (
           <>
-            {children}
+            {props.children as React.ReactNode}
             {allowsRemoving && (
               <Button
                 slot="remove"
diff --git a/components/ui/tree.tsx b/components/ui/tree.tsx
index 3bf35ee4..a03ea18f 100644
--- a/components/ui/tree.tsx
+++ b/components/ui/tree.tsx
@@ -79,7 +79,7 @@ const ItemContent = (props: React.ComponentProps<typeof TreeItemContent>) => {
   return (
     <TreeItemContent {...props}>
       <div className="flex items-center">
-        <>{props.children}</>
+        <>{props.children as React.ReactNode}</>
       </div>
     </TreeItemContent>
   )
diff --git a/package.json b/package.json
index eba9ea4f..2b0a26ed 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "@types/chroma-js": "^2.4.4",
     "@types/color-namer": "^1.3.3",
     "@types/culori": "^2.1.1",
-    "@types/node": "^20.17.6",
+    "@types/node": "^20.17.7",
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@types/title": "^3.4.3",
@@ -77,7 +77,7 @@
     "rehype-slug": "^6.0.0",
     "tailwindcss": "^3.4.15",
     "tailwindcss-motion": "^0.3.0-beta",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.2",
     "velite": "0.1.0-beta.11"
   },
   "repository": {