refactor: circular deps in theme-panel

[nayounsang]

Description

Hi 👋,
While working with the @radix-ui/themes package, I noticed that there is a circular dependency between the following files: index -> components/index -> components/theme-panel -> index.
So I refactor circular deps.

This circular deps doesn't necessarily break functionality in most environments, but it introduces risks such as:

• Unexpected module initialization order
• Increased complexity in module resolution
• Potential issues during bundling (especially with Rollup or Webpack tree-shaking)
• Harder maintainability in large codebases

I believe refactoring this cycle could improve maintainability and reliability, especially for consumers integrating Radix.
Thanks for your amazing work on Radix! 🙌

Before

> madge \                                                
  --extensions ts,tsx,js,jsx \
  --circular \
  --ts-config packages/radix-ui-themes/tsconfig.json \
  packages/radix-ui-themes

✖ Found 3 circular dependencies!

1) dist/cjs/components/index.js > dist/cjs/components/theme-panel.js > dist/cjs/index.js
2) dist/esm/components/index.js > dist/esm/components/theme-panel.js > dist/esm/index.js
3) src/components/index.tsx > src/components/theme-panel.tsx > src/index.ts

• circular dep detected

After

✔ No circular dependency found!

• Components are imported from their respective paths, not from the index.

(If you want, you can additionally work on detecting circular dependencies in development or CI.)

Testing steps

• No logic change (just change import)
• It runs without any problems in build and dev.

Relates issues / PRs

close #671

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
themes-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 14, 2025 2:31pm

[nayounsang]

Other than this, these are changes due to applying prettier. If there are any problems, please let me know.