fix: 🐛 resolve circular dependencies (first pass)

.changeset/fast-drinks-argue.md

@@ -0,0 +1,38 @@
+---
+'@clickhouse/click-ui': minor
+---
+
+The Click-UI source code has several circular dependencies that must be resolved.
+
+During the resolution of component path redundancies and public API encapsulation in #798, several circular dependencies were exposed. There, some quick basic fixes were applied to allow to progress, but it was found that a separate PR was needed to resolve them.
+
+**What changed?**
+
+The `InitCUIThemeScript` component and `InitCUIThemeScriptProps` type were previously exported via `src/theme/index.ts` (which has been removed). They are now explicitly exported from the main entry point (`src/index.ts`). Consumers using SSR theme injection must update their imports:
+
+```tsx
+// Before
+import { InitCUIThemeScript } from '@clickhouse/click-ui/theme';
+
+// After
+import { InitCUIThemeScript } from '@clickhouse/click-ui';
+```
+
+
+**Additional cleanup:**
+
+Removed orphaned subpath exports for `CrossButton`, `EmptyButton`, and `GridCenter`. These components were moved to `@/components/Common` in a previous refactor but duplicate directories were left behind. They are now exclusively available via the Common module:
+
+```tsx
+// Before
+import { CrossButton } from '@clickhouse/click-ui/CrossButton';
+
+// After
+import { CrossButton } from '@clickhouse/click-ui';
+// or for internal use:
+import { CrossButton } from '@/components/Common';
+```
+
+**Bug fix:**
+
+Fixed a broken type export in `src/components/Common/index.ts` that was referencing a deleted file (`Common.types.ts`). The `TextSize`, `TextWeight`, and `CursorOptions` types are now correctly exported from their respective source files (`Typography` and `Panel`).

.storybook/preview.tsx

@@ -1,15 +1,15 @@
-import { useState, useEffect, ReactNode } from "react";
-import type { Preview } from "@storybook/react-vite";
-import { Decorator } from "@storybook/react-vite";
-import { styled } from "styled-components";
-import { themes } from "storybook/theming";
-import ClickUIProvider from "../src/theme/ClickUIProvider/ClickUIProvider";
+import { useState, useEffect, ReactNode } from 'react';
+import type { Preview } from '@storybook/react-vite';
+import { Decorator } from '@storybook/react-vite';
+import { styled } from 'styled-components';
+import { themes } from 'storybook/theming';
+import { ClickUIProvider } from '@/providers';
 
 const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
   ({ $left, $bfill: fill, theme }) => `
       position: absolute;
       top: 0.5rem;
-      left: ${$left || fill ? 0 : "50vw"};
+      left: ${$left || fill ? 0 : '50vw'};
       right: 0;
       height: fit-content;
       bottom: 0;
@@ -22,28 +22,26 @@ const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
 
 export const globalTypes = {
   theme: {
-    name: "Theme",
-    description: "Global theme for components",
-    defaultValue: "system",
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'system',
     toolbar: {
-      icon: "circlehollow",
+      icon: 'circlehollow',
       items: [
-        { value: "system", icon: "browser", title: "system" },
-        { value: "dark", icon: "moon", title: "dark" },
-        { value: "light", icon: "sun", title: "light" },
+        { value: 'system', icon: 'browser', title: 'system' },
+        { value: 'dark', icon: 'moon', title: 'dark' },
+        { value: 'light', icon: 'sun', title: 'light' },
       ],
       showName: true,
     },
   },
 };
 
-const getSystemTheme = (): "dark" | "light" => {
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? "dark"
-      : "light";
+const getSystemTheme = (): 'dark' | 'light' => {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
-  return "dark";
+  return 'dark';
 };
 
 interface ThemeWrapperProps {
@@ -52,24 +50,27 @@ interface ThemeWrapperProps {
 }
 
 const ThemeWrapper = ({ themeSelection, children }: ThemeWrapperProps) => {
-  const [systemTheme, setSystemTheme] = useState<"dark" | "light">(getSystemTheme);
+  const [systemTheme, setSystemTheme] = useState<'dark' | 'light'>(getSystemTheme);
 
   // Listen for system theme changes
   useEffect(() => {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleChange = () => {
-      setSystemTheme(mediaQuery.matches ? "dark" : "light");
+      setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
     };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
   }, []);
 
   // Resolve the actual theme: handle "system" and fallback for undefined/null
   const theme =
-    themeSelection === "system" || !themeSelection ? systemTheme : themeSelection;
+    themeSelection === 'system' || !themeSelection ? systemTheme : themeSelection;
 
   return (
-    <ClickUIProvider theme={theme} config={{ tooltip: { delayDuration: 0 } }}>
+    <ClickUIProvider
+      theme={theme}
+      config={{ tooltip: { delayDuration: 0 } }}
+    >
       <ThemeBlock $left>{children}</ThemeBlock>
     </ClickUIProvider>
   );
@@ -90,22 +91,22 @@ const preview: Preview = {
   parameters: {
     options: {
       storySort: {
-        method: "alphabetical",
+        method: 'alphabetical',
         order: [
-          "Introduction",
-          "Buttons",
-          "Cards",
-          "Layout",
-          "Forms",
-          "Display",
-          "Sidebar",
-          "Typography",
-          "Colors",
-          ["Title", "Text", "Link"],
+          'Introduction',
+          'Buttons',
+          'Cards',
+          'Layout',
+          'Forms',
+          'Display',
+          'Sidebar',
+          'Typography',
+          'Colors',
+          ['Title', 'Text', 'Link'],
         ],
       },
     },
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

package.json

@@ -157,6 +157,11 @@
       "import": "./dist/esm/components/GenericLabel/index.js",
       "require": "./dist/cjs/components/GenericLabel/index.cjs"
     },
+    "./GenericMenu": {
+      "types": "./dist/types/components/GenericMenu/index.d.ts",
+      "import": "./dist/esm/components/GenericMenu/index.js",
+      "require": "./dist/cjs/components/GenericMenu/index.cjs"
+    },
     "./Grid": {
       "types": "./dist/types/components/Grid/index.d.ts",
       "import": "./dist/esm/components/Grid/index.js",

src/components/Accordion/Accordion.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Panel } from '..';
+import { Panel } from '@/components/Panel';
 import { Accordion } from '@/components/Accordion';
-import { Spacer } from '../Spacer';
-import { Text } from '../Typography/Text/Text';
-import { Title } from '../Typography/Title/Title';
+import { Spacer } from '@/components/Spacer';
+import { Text } from '@/components/Typography/Text';
+import { Title } from '@/components/Typography/Title';
 
 const meta: Meta<typeof Accordion> = {
   component: Accordion,

src/components/Accordion/Accordion.types.ts

@@ -1,7 +1,7 @@
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import { ReactNode } from 'react';
-import { IconName } from '@/components/Icon';
-import { IconSize } from '@/types';
+import type { AssetSize } from '@/types';
+import type { IconName } from '@/components/Icon';
 
 export type Size = 'sm' | 'md' | 'lg';
 export type Gap = 'sm' | 'md' | 'lg';
@@ -18,7 +18,7 @@ export interface AccordionProps
   title: ReactNode;
   color?: Color;
   icon?: IconName;
-  iconSize?: IconSize;
+  iconSize?: AssetSize;
   gap?: Gap;
   children: React.ReactNode;
   fillWidth?: boolean;

src/components/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import { Icon, IconName } from '@/components/Icon';
+import { Icon, type IconName } from '@/components/Icon';
 import { useState, useCallback } from 'react';
 import { styled } from 'styled-components';
 import { AlertProps } from './Alert.types';

src/components/Alert/Alert.types.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@/components/Icon';
+import type { IconName } from '@/components/Icon';
 import { ReactNode } from 'react';
 
 type AlertType = 'default' | 'banner';

src/components/Assets/Flags/Australia.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Australia = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Brazil.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Brazil = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Canada.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Canada = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/European-Union.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const EuropeanUnion = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Germany.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Germany = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Hong-Kong.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const HongKong = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/India.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const India = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Indonesia.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Indonesia = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Ireland.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Ireland = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Israel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Israel = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Japan.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Japan = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Netherlands.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Netherlands = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Singapore.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Singapore = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/South-Africa.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const SouthAfrica = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/South-Korea.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const SouthKorea = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Sweden.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Sweden = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/Switzerland.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const Switzerland = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/United-Arab-Emirates.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const UnitedArabEmirates = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/United-Kingdom.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 const UnitedKingdom = (props: SVGAssetProps): React.ReactElement => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

src/components/Assets/Flags/United-States.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVGAssetProps } from './system/types';
+import type { SVGAssetProps } from '@/types';
 
 const UnitedStates = (props: SVGAssetProps): React.ReactElement => (
   <svg

src/components/Assets/Flags/system/Flag.tsx

@@ -1,6 +1,6 @@
 import { SVGAttributes } from 'react';
 import { useTheme } from 'styled-components';
-import { getFallbackThemeName } from '@/utils/theme';
+import { getFallbackThemeName } from '@/theme/theme.utils';
 import { SvgImageElement } from '@/components/Icon/SvgImageElement';
 import { FlagProps } from './types';
 import { resolveFlagName } from './retroactiveNames';

src/components/Assets/Flags/system/FlagsDark.ts

@@ -27,7 +27,7 @@ import United_Arab_Emirates from '../United-Arab-Emirates';
 import United_Kingdom from '../United-Kingdom';
 import United_States from '../United-States';
 import { FlagName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const FlagsLight: Record<FlagName, ComponentType<SVGAssetProps>> = {

src/components/Assets/Flags/system/FlagsLight.ts

@@ -27,7 +27,7 @@ import United_Arab_Emirates from '../United-Arab-Emirates';
 import United_Kingdom from '../United-Kingdom';
 import United_States from '../United-States';
 import { FlagName } from './types';
-import type { SVGAssetProps } from '../../types';
+import type { SVGAssetProps } from '@/types';
 import type { ComponentType } from 'react';
 
 const FlagsLight: Record<FlagName, ComponentType<SVGAssetProps>> = {