feat: upgrade park-ui

package.json

@@ -27,7 +27,7 @@
     "postinstall": "papi && panda codegen"
   },
   "dependencies": {
-    "@ark-ui/react": "^4.1.2",
+    "@ark-ui/react": "^4.4.4",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -36,24 +36,24 @@
     "@reactive-dot/react": "^0.26.2",
     "@reactive-dot/wallet-ledger": "^0.16.18",
     "@reactive-dot/wallet-walletconnect": "^0.16.18",
-    "@tanstack/react-router": "^1.81.9",
+    "@tanstack/react-router": "^1.82.1",
     "@w3f/polkadot-icons": "^1.0.0",
     "date-fns": "^4.1.0",
     "dot-connect": "^0.12.1",
     "dot-identicon": "^0.1.0",
-    "jotai": "^2.10.2",
-    "polkadot-api": "^1.7.3",
+    "jotai": "^2.10.3",
+    "polkadot-api": "^1.7.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react18-json-view": "^0.2.9-canary.8"
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.3",
-    "@eslint/js": "^9.14.0",
-    "@pandacss/dev": "^0.47.1",
-    "@park-ui/panda-preset": "^0.42.0",
-    "@tanstack/router-devtools": "^1.81.9",
+    "@eslint/js": "^9.15.0",
+    "@pandacss/dev": "^0.48.0",
+    "@park-ui/panda-preset": "^0.43.0",
+    "@tanstack/router-devtools": "^1.82.1",
     "@tanstack/router-plugin": "^1.81.9",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@tsconfig/strictest": "^2.0.5",
@@ -62,13 +62,13 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "prettier": "^3.3.3",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.14.0",
+    "typescript-eslint": "^8.15.0",
     "vite": "^5.4.11",
-    "vite-tsconfig-paths": "^5.1.2"
+    "vite-tsconfig-paths": "^5.1.3"
   }
 }

panda.config.ts

@@ -1,14 +1,15 @@
 import { defineConfig } from "@pandacss/dev";
 import { createPreset } from "@park-ui/panda-preset";
+import crimson from "@park-ui/panda-preset/colors/crimson";
+import neutral from "@park-ui/panda-preset/colors/neutral";
 
 export default defineConfig({
   preflight: true,
   presets: [
-    "@pandacss/preset-base",
     createPreset({
-      accentColor: "crimson",
-      grayColor: "neutral",
-      borderRadius: "2xl",
+      accentColor: crimson,
+      grayColor: neutral,
+      radius: "2xl",
     }),
   ],
   include: ["./src/**/*.{js,jsx,ts,tsx}"],

park-ui.json

@@ -1,9 +1,5 @@
 {
   "$schema": "https://park-ui.com/registry/latest/schema.json",
-  "importAlias": "~/*",
   "jsFramework": "react",
-  "outputPaths": {
-    "componentsDir": "~/components/ui",
-    "libDir": "~/lib"
-  }
+  "outputPath": "./src/components/ui"
 }

src/components/account-list-item.tsx

@@ -1,5 +1,6 @@
-import { Heading, Text } from "./ui";
+import { Heading } from "./ui/heading";
 import { Icon } from "./ui/icon";
+import { Text } from "./ui/text";
 import { idle } from "@reactive-dot/core";
 import { useLazyLoadQuery } from "@reactive-dot/react";
 import IdentityIcon from "@w3f/polkadot-icons/solid/Identity";
@@ -146,13 +147,13 @@ function AccountListItemTemplate({
               case "on-chain":
                 return (
                   <Icon size="sm">
-                    <IdentityIcon fill="var(--colors-accent-emphasized)" />
+                    <IdentityIcon fill="var(--colors-color-palette-emphasized)" />
                   </Icon>
                 );
               case "sub-identity":
                 return (
                   <Icon size="sm">
-                    <SubIdentityIcon fill="var(--colors-accent-emphasized)" />
+                    <SubIdentityIcon fill="var(--colors-color-palette-emphasized)" />
                   </Icon>
                 );
               default:
@@ -168,7 +169,7 @@ function AccountListItemTemplate({
             style={
               identityType === undefined
                 ? undefined
-                : { color: "var(--colors-accent-emphasized)" }
+                : { color: "var(--colors-color-palette-emphasized)" }
             }
           >
             {displayName ?? (

src/components/codec-view.tsx

@@ -1,5 +1,5 @@
 import { unbinary } from "../utils";
-import { Code } from "./ui";
+import { Code } from "./ui/code";
 import JsonView from "react18-json-view";
 import { css, cx } from "styled-system/css";
 

src/components/constant-form.tsx

@@ -1,10 +1,9 @@
 import type { ConstantQuery, Pallet } from "../types";
 import { PalletSelect } from "./pallet-select";
 import { Select } from "./select";
-import { Button, Code } from "./ui";
+import { Button } from "./ui/button";
+import { Code } from "./ui/code";
 import { useChainId } from "@reactive-dot/react";
-import Check from "@w3f/polkadot-icons/solid/Check";
-import ChevronDown from "@w3f/polkadot-icons/solid/ChevronDown";
 import { useState, type ReactNode } from "react";
 import { css } from "styled-system/css";
 

src/components/param/accountId.tsx

@@ -1,5 +1,6 @@
 import { AccountSelect } from "../account-select";
-import { Input, Switch } from "../ui";
+import { Input } from "../ui/input";
+import { Switch } from "../ui/switch";
 import { INCOMPLETE, INVALID, type ParamProps } from "./common";
 import { getSs58AddressInfo } from "@polkadot-api/substrate-bindings";
 import type {

src/components/param/binary.tsx

@@ -1,4 +1,8 @@
-import { Button, FileUpload, IconButton, Input, Switch } from "../ui";
+import { Button } from "../ui/button";
+import { FileUpload } from "../ui/file-upload";
+import { IconButton } from "../ui/icon-button";
+import { Input } from "../ui/input";
+import { Switch } from "../ui/switch";
 import { INCOMPLETE, type ParamInput, type ParamProps } from "./common";
 import { Binary } from "@polkadot-api/substrate-bindings";
 import Delete from "@w3f/polkadot-icons/solid/DeleteCancel";

src/components/param/compact.tsx

@@ -1,4 +1,4 @@
-import { Input } from "../ui";
+import { Input } from "../ui/input";
 import type { ParamProps } from "./common";
 import { useEffect, useState } from "react";
 

src/components/param/options.tsx

@@ -1,4 +1,4 @@
-import { Switch } from "../ui";
+import { Switch } from "../ui/switch";
 import { CodecParam } from "./codec";
 import { INCOMPLETE, type ParamInput, type ParamProps } from "./common";
 import type { OptionDecoded, OptionShape } from "@polkadot-api/view-builder";

src/components/param/primitive.tsx

@@ -1,4 +1,5 @@
-import { Input, Switch } from "../ui";
+import { Input } from "../ui/input";
+import { Switch } from "../ui/switch";
 import type { ParamProps } from "./common";
 import type { PrimitiveDecoded } from "@polkadot-api/view-builder";
 import { type ChangeEvent, useEffect, useState } from "react";

src/components/param/sequence.tsx

@@ -1,4 +1,5 @@
-import { Button, IconButton } from "../ui";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
 import { CodecParam } from "./codec";
 import {
   INCOMPLETE,

src/components/param/struct.tsx

@@ -1,4 +1,4 @@
-import { FormLabel } from "../ui";
+import { FormLabel } from "../ui/form-label";
 import { CodecParam } from "./codec";
 import { INCOMPLETE, INVALID, type ParamProps } from "./common";
 import type { StructDecoded, StructShape } from "@polkadot-api/view-builder";

src/components/query-result.tsx

@@ -1,7 +1,11 @@
 import type { Query } from "../types";
 import { stringifyCodec } from "../utils";
 import { CodecView } from "./codec-view";
-import { Card, Code, FormLabel, IconButton, Progress } from "./ui";
+import { Card } from "./ui/card";
+import { Code } from "./ui/code";
+import { FormLabel } from "./ui/form-label";
+import { IconButton } from "./ui/icon-button";
+import { Progress } from "./ui/progress";
 import {
   useLazyLoadQueryWithRefresh,
   useQueryErrorResetter,
@@ -177,7 +181,7 @@ function QueryErrorBoundary({ onDelete, children }: QueryErrorBoundaryProps) {
 
   return (
     <ErrorBoundary
-      fallbackRender={({ error, resetErrorBoundary }) => (
+      fallbackRender={({ resetErrorBoundary }) => (
         <Card.Root>
           <Card.Header>
             <Card.Title
@@ -189,22 +193,16 @@ function QueryErrorBoundary({ onDelete, children }: QueryErrorBoundaryProps) {
               })}
             >
               <div>Error fetching query</div>
-              <IconButton
-                variant="ghost"
-                onClick={() => resetErrorBoundary(error)}
-              >
+              <IconButton variant="ghost" onClick={() => resetErrorBoundary()}>
                 <Close fill="currentcolor" />
               </IconButton>
             </Card.Title>
           </Card.Header>
         </Card.Root>
       )}
-      onReset={(details) => {
+      onReset={() => {
         onDelete();
-        if (details.reason === "imperative-api") {
-          const [error] = details.args;
-          resetQueryError(error);
-        }
+        resetQueryError();
       }}
     >
       {children}

src/components/runtime-api-form.tsx

@@ -2,7 +2,7 @@ import { useMetadata } from "../hooks/metadata";
 import type { RuntimeApi, RuntimeApiMethod, RuntimeApiQuery } from "../types";
 import { CodecParam, INCOMPLETE, INVALID } from "./param";
 import { Select } from "./select";
-import { Button, Code } from "./ui";
+import { Button } from "./ui/button";
 import { useChainId } from "@reactive-dot/react";
 import { useState } from "react";
 import { css } from "styled-system/css";

src/components/select.tsx

@@ -1,4 +1,4 @@
-import { Select as BaseSelect } from "./ui";
+import { Select as BaseSelect } from "./ui/select";
 import { createListCollection } from "@ark-ui/react";
 import Check from "@w3f/polkadot-icons/solid/Check";
 import ChevronDown from "@w3f/polkadot-icons/solid/ChevronDown";

src/components/storage-form.tsx

@@ -13,7 +13,10 @@ import {
   type ParamInput,
 } from "./param";
 import { Select } from "./select";
-import { Button, Code, FormLabel, Text } from "./ui";
+import { Button } from "./ui/button";
+import { Code } from "./ui/code";
+import { FormLabel } from "./ui/form-label";
+import { Text } from "./ui/text";
 import { useChainId } from "@reactive-dot/react";
 import { useMemo, useState, type ReactNode } from "react";
 import { css } from "styled-system/css";

src/components/ui/accordion.tsx

@@ -1 +1 @@
-export * as Accordion from "./primitives/accordion";
+export * as Accordion from "./styled/accordion";

src/components/ui/alert.tsx

@@ -1 +1 @@
-export * as Alert from "./primitives/alert";
+export * as Alert from "./styled/alert";

src/components/ui/avatar.tsx

@@ -1,7 +1,7 @@
-import * as ArkAvatar from "./primitives/avatar";
+import * as StyledAvatar from "./styled/avatar";
 import { forwardRef } from "react";
 
-export interface AvatarProps extends ArkAvatar.RootProps {
+export interface AvatarProps extends StyledAvatar.RootProps {
   name?: string;
   src?: string;
 }
@@ -10,12 +10,12 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
   const { name, src, ...rootProps } = props;
 
   return (
-    <ArkAvatar.Root ref={ref} {...rootProps}>
-      <ArkAvatar.Fallback>
+    <StyledAvatar.Root ref={ref} {...rootProps}>
+      <StyledAvatar.Fallback>
         {getInitials(name) || <UserIcon />}
-      </ArkAvatar.Fallback>
-      <ArkAvatar.Image src={src} alt={name} />
-    </ArkAvatar.Root>
+      </StyledAvatar.Fallback>
+      <StyledAvatar.Image src={src} alt={name} />
+    </StyledAvatar.Root>
   );
 });
 

src/components/ui/badge.tsx

@@ -1 +1 @@
-export { Badge, type BadgeProps } from "./primitives/badge";
+export { Badge, type BadgeProps } from "./styled/badge";

src/components/ui/button.tsx

@@ -1,8 +1,8 @@
+import { Spinner } from "./spinner";
 import {
   Button as StyledButton,
   type ButtonProps as StyledButtonProps,
-} from "./primitives/button";
-import { Spinner } from "./spinner";
+} from "./styled/button";
 import { forwardRef } from "react";
 import { Center, styled } from "styled-system/jsx";
 
@@ -46,6 +46,12 @@ const ButtonSpinner = () => (
     top="50%"
     insetStart="50%"
   >
-    <Spinner colorPalette="gray" />
+    <Spinner
+      width="1.1em"
+      height="1.1em"
+      borderWidth="1.5px"
+      borderTopColor="fg.disabled"
+      borderRightColor="fg.disabled"
+    />
   </Center>
 );

src/components/ui/card.tsx

@@ -1 +1 @@
-export * as Card from "./primitives/card";
+export * as Card from "./styled/card";

src/components/ui/carousel.tsx

@@ -1 +1 @@
-export * as Carousel from "./primitives/carousel";
+export * as Carousel from "./styled/carousel";

src/components/ui/checkbox.tsx

@@ -1,25 +1,25 @@
-import * as ArkCheckbox from "./primitives/checkbox";
+import * as StyledCheckbox from "./styled/checkbox";
 import { forwardRef } from "react";
 
-export interface CheckboxProps extends ArkCheckbox.RootProps {}
+export interface CheckboxProps extends StyledCheckbox.RootProps {}
 
 export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
   (props, ref) => {
     const { children, ...rootProps } = props;
 
     return (
-      <ArkCheckbox.Root ref={ref} {...rootProps}>
-        <ArkCheckbox.Control>
-          <ArkCheckbox.Indicator>
+      <StyledCheckbox.Root ref={ref} {...rootProps}>
+        <StyledCheckbox.Control>
+          <StyledCheckbox.Indicator>
             <CheckIcon />
-          </ArkCheckbox.Indicator>
-          <ArkCheckbox.Indicator indeterminate>
+          </StyledCheckbox.Indicator>
+          <StyledCheckbox.Indicator indeterminate>
             <MinusIcon />
-          </ArkCheckbox.Indicator>
-        </ArkCheckbox.Control>
-        {children && <ArkCheckbox.Label>{children}</ArkCheckbox.Label>}
-        <ArkCheckbox.HiddenInput />
-      </ArkCheckbox.Root>
+          </StyledCheckbox.Indicator>
+        </StyledCheckbox.Control>
+        {children && <StyledCheckbox.Label>{children}</StyledCheckbox.Label>}
+        <StyledCheckbox.HiddenInput />
+      </StyledCheckbox.Root>
     );
   },
 );

src/components/ui/clipboard.tsx

@@ -1 +1 @@
-export * as Clipboard from "./primitives/clipboard";
+export * as Clipboard from "./styled/clipboard";

src/components/ui/code.tsx

@@ -1 +1 @@
-export { Code, type CodeProps } from "./primitives/code";
+export { Code, type CodeProps } from "./styled/code";

src/components/ui/collapsible.tsx

@@ -1 +1 @@
-export * as Collapsible from "./primitives/collapsible";
+export * as Collapsible from "./styled/collapsible";

src/components/ui/color-picker.tsx

@@ -1 +1 @@
-export * as ColorPicker from "./primitives/color-picker";
+export * as ColorPicker from "./styled/color-picker";

src/components/ui/combobox.tsx

@@ -1 +1,2 @@
-export * as Combobox from "./primitives/combobox";
+export { createListCollection } from "@ark-ui/react/combobox";
+export * as Combobox from "./styled/combobox";

src/components/ui/date-picker.tsx

@@ -1 +1 @@
-export * as DatePicker from "./primitives/date-picker";
+export * as DatePicker from "./styled/date-picker";

src/components/ui/dialog.tsx

@@ -1 +1 @@
-export * as Dialog from "./primitives/dialog";
+export * as Dialog from "./styled/dialog";

src/components/ui/drawer.tsx

@@ -1 +1 @@
-export * as Drawer from "./primitives/drawer";
+export * as Drawer from "./styled/drawer";