kobalte breaking change

src/components/AmountEditable.tsx

@@ -135,7 +135,7 @@ export const AmountEditable: ParentComponent<{ initialAmountSats: string, initia
     const DIALOG_CONTENT = "h-full safe-bottom flex flex-col justify-between p-4 backdrop-blur-xl bg-neutral-800/70"
 
     return (
-        <Dialog.Root isOpen={isOpen()}>
+        <Dialog.Root open={isOpen()}>
             <button onClick={() => setIsOpen(true)} class="px-4 py-2 rounded-xl border-2 border-m-blue flex gap-2 items-center">
                 {/* <Amount amountSats={Number(displayAmount())} showFiat /><span>&#x270F;&#xFE0F;</span> */}
                 <Show when={displayAmount() !== "0"} fallback={<div class="inline-block font-semibold">Set amount</div>}>

src/components/ContactEditor.tsx

@@ -26,7 +26,7 @@ export function ContactEditor(props: { createContact: (contact: ContactItem) =>
     const DIALOG_CONTENT = "h-full safe-bottom flex flex-col justify-between p-4 backdrop-blur-xl bg-neutral-800/70"
 
     return (
-        <Dialog.Root isOpen={isOpen()}>
+        <Dialog.Root open={isOpen()}>
             <Switch>
                 <Match when={props.list}>
                     <button onClick={() => setIsOpen(true)} class="flex flex-col items-center gap-2">

src/components/ContactViewer.tsx

@@ -20,7 +20,7 @@ export function ContactViewer(props: { contact: ContactItem, gradient: string, s
     const DIALOG_CONTENT = "h-full safe-bottom flex flex-col justify-between p-4 backdrop-blur-xl bg-neutral-800/70"
 
     return (
-        <Dialog.Root isOpen={isOpen()}>
+        <Dialog.Root open={isOpen()}>
             <button onClick={() => setIsOpen(true)} class="flex flex-col items-center gap-2 w-16 flex-shrink-0 overflow-x-hidden">
                 <div class="flex-none h-16 w-16 rounded-full flex items-center justify-center text-4xl uppercase border-t border-b border-t-white/50 border-b-white/10"
                     style={{ background: props.gradient }}

src/components/DeleteEverything.tsx

@@ -53,7 +53,7 @@ export function DeleteEverything() {
     return (
         <>
             <Button onClick={confirmReset}>Delete Everything</Button>
-            <ConfirmDialog loading={confirmLoading()} isOpen={confirmOpen()} onConfirm={resetNode} onCancel={() => setConfirmOpen(false)}>
+            <ConfirmDialog loading={confirmLoading()} open={confirmOpen()} onConfirm={resetNode} onCancel={() => setConfirmOpen(false)}>
                 This will delete your node's state. This can't be undone!
             </ConfirmDialog>
         </>

src/components/Dialog.tsx

@@ -7,9 +7,9 @@ const DIALOG_POSITIONER = "fixed inset-0 z-50 flex items-center justify-center"
 const DIALOG_CONTENT = "w-[80vw] max-w-[400px] p-4 bg-gray/50 backdrop-blur-md shadow-xl rounded-xl border border-white/10"
 
 // TODO: implement this like toast so it's just one global confirm and I can call it with `confirm({ title: "Are you sure?", description: "This will delete your node" })`
-export const ConfirmDialog: ParentComponent<{ isOpen: boolean; loading: boolean; onCancel: () => void, onConfirm: () => void }> = (props) => {
+export const ConfirmDialog: ParentComponent<{ open: boolean; loading: boolean; onCancel: () => void, onConfirm: () => void }> = (props) => {
     return (
-        <Dialog.Root isOpen={props.isOpen} onOpenChange={props.onCancel}>
+        <Dialog.Root open={props.open} onOpenChange={props.onCancel}>
             <Dialog.Portal>
                 <Dialog.Overlay class={OVERLAY} />
                 <div class={DIALOG_POSITIONER}>

src/components/ImportExport.tsx

@@ -67,7 +67,7 @@ export function ImportExport() {
                     <Button onClick={uploadFile}>Upload Saved State</Button>
                 </VStack>
             </InnerCard>
-            <ConfirmDialog loading={confirmLoading()} isOpen={confirmOpen()} onConfirm={importJson} onCancel={() => setConfirmOpen(false)}>
+            <ConfirmDialog loading={confirmLoading()} open={confirmOpen()} onConfirm={importJson} onCancel={() => setConfirmOpen(false)}>
                 Do you want to replace your state with {files()[0].name}?
             </ConfirmDialog>
         </>

src/components/JsonModal.tsx

@@ -13,7 +13,7 @@ export function JsonModal(props: { title: string, open: boolean, data?: unknown,
     const [copy, copied] = useCopy({ copiedTimeout: 1000 });
 
     return (
-        <Dialog.Root isOpen={props.open} onOpenChange={(isOpen) => props.setOpen(isOpen)}>
+        <Dialog.Root open={props.open} onOpenChange={(isOpen) => props.setOpen(isOpen)}>
             <Dialog.Portal>
                 <Dialog.Overlay class={OVERLAY} />
                 <div class={DIALOG_POSITIONER}>

src/components/KitchenSink.tsx

@@ -167,7 +167,7 @@ function ChannelItem(props: { channel: MutinyChannel, network?: string }) {
                     <Button intent="glowy" layout="xs" onClick={handleCloseChannel}>Close Channel</Button>
 
                 </VStack>
-                <ConfirmDialog isOpen={confirmOpen()} onConfirm={confirmCloseChannel} onCancel={() => setConfirmOpen(false)} loading={confirmLoading()}>
+                <ConfirmDialog open={confirmOpen()} onConfirm={confirmCloseChannel} onCancel={() => setConfirmOpen(false)} loading={confirmLoading()}>
                     <p>Are you sure you want to close this channel?</p>
                 </ConfirmDialog>
             </Collapsible.Content>

src/components/layout/FullscreenModal.tsx

@@ -18,7 +18,7 @@ type FullscreenModalProps = {
 
 export function FullscreenModal(props: FullscreenModalProps) {
     return (
-        <Dialog.Root isOpen={props.open} onOpenChange={(isOpen) => props.setOpen(isOpen)}>
+        <Dialog.Root open={props.open} onOpenChange={(isOpen) => props.setOpen(isOpen)}>
             <Dialog.Portal>
                 <div class={DIALOG_POSITIONER}>
                     <Dialog.Content class={DIALOG_CONTENT}>

src/components/layout/Radio.tsx

@@ -7,7 +7,7 @@ type Choices = { value: string, label: string, caption: string }[]
 export function StyledRadioGroup(props: { value: string, choices: Choices, onValueChange: (value: string) => void, small?: boolean, accent?: "red" | "white" }) {
     return (
         // TODO: rewrite this with CVA, props are bad for tailwind
-        <RadioGroup.Root value={props.value} onValueChange={(e) => props.onValueChange(e)}
+        <RadioGroup.Root value={props.value} onChange={(e) => props.onValueChange(e)}
             class={"grid w-full gap-4"}
             classList={{ "grid-cols-2": props.choices.length === 2, "grid-cols-3": props.choices.length === 3, "gap-2": props.small }}
         >