fix some ts

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"

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": {

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>

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) => (

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>
   )
 }

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>

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
 }
 

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,22 +69,22 @@ 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"]
   role?: DialogProps["role"]
   closeButton?: boolean
   isBlurred?: boolean
   classNames?: {
-    overlay?: ModalOverlayPrimitiveProps["className"]
-    content?: ModalOverlayPrimitiveProps["className"]
+    overlay?: ModalOverlayProps["className"]
+    content?: ModalOverlayProps["className"]
   }
 }
 

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>

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>

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"

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" : "" })}>

components/ui/tabs.tsx

@@ -99,7 +99,7 @@ const Tab = ({ children, ...props }: TabProps) => {
     >
       {({ isSelected }) => (
         <>
-          {children}
+          {children as React.ReactNode}
           {isSelected && (
             <motion.span
               className={cn(

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"

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>
   )

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": {