refactor(ui): update utility imports to use internal lib

- Changed utility imports from '@cherrystudio/ui/utils' to '@cherrystudio/ui/lib/utils' across multiple components for better organization.
- Introduced a new internal utility module for class name merging, ensuring consistent usage across the UI components.
- Updated relevant components to reflect the new import paths, enhancing maintainability and clarity.

packages/ui/components.json

@@ -5,7 +5,7 @@
     "hooks": "@cherrystudio/ui/hooks",
     "lib": "@cherrystudio/ui/lib",
     "ui": "@cherrystudio/ui/components/primitives",
-    "utils": "@cherrystudio/ui/utils"
+    "utils": "@cherrystudio/ui/lib/utils"
   },
   "iconLibrary": "lucide",
   "rsc": false,

packages/ui/src/components/composites/Ellipsis/index.tsx

@@ -1,8 +1,7 @@
 // Original: src/renderer/src/components/Ellipsis/index.tsx
+import { cn } from '@cherrystudio/ui/lib/utils'
 import type { HTMLAttributes } from 'react'
 
-import { cn } from '../../../utils'
-
 type Props = {
   maxLine?: number
   className?: string

packages/ui/src/components/composites/Flex/index.tsx

@@ -1,7 +1,6 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
 import React from 'react'
 
-import { cn } from '../../../utils'
-
 export interface BoxProps extends React.ComponentProps<'div'> {}
 
 export const Box = ({ children, className, ...props }: BoxProps & { children?: React.ReactNode }) => {

packages/ui/src/components/composites/Input/input.tsx

@@ -1,4 +1,5 @@
-import { cn, toUndefinedIfNull } from '@cherrystudio/ui/utils'
+import { cn } from '@cherrystudio/ui/lib/utils'
+import { toUndefinedIfNull } from '@cherrystudio/ui/utils/index'
 import type { VariantProps } from 'class-variance-authority'
 import { cva } from 'class-variance-authority'
 import { Edit2Icon, EyeIcon, EyeOffIcon } from 'lucide-react'

packages/ui/src/components/composites/ListItem/index.tsx

@@ -1,9 +1,8 @@
 // Original path: src/renderer/src/components/ListItem/index.tsx
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { Tooltip } from '@heroui/react'
 import type { ReactNode } from 'react'
 
-import { cn } from '../../../utils'
-
 interface ListItemProps {
   active?: boolean
   icon?: ReactNode

packages/ui/src/components/composites/Sortable/ItemRenderer.tsx

@@ -1,10 +1,10 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
 import type { DraggableSyntheticListeners } from '@dnd-kit/core'
 import type { Transform } from '@dnd-kit/utilities'
 import { CSS } from '@dnd-kit/utilities'
 import React, { useEffect } from 'react'
 import styled from 'styled-components'
 
-import { cn } from '../../../utils'
 import type { RenderItemType } from './types'
 
 interface ItemRendererProps<T> {

packages/ui/src/components/composites/ThinkingEffect/index.tsx

@@ -7,12 +7,12 @@
  */
 
 // Original path: src/renderer/src/components/ThinkingEffect.tsx
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { isEqual } from 'lodash'
 import { ChevronRight, Lightbulb } from 'lucide-react'
 import { motion } from 'motion/react'
 import React, { useEffect, useMemo, useState } from 'react'
 
-import { cn } from '../../../utils'
 import { lightbulbVariants } from './defaultVariants'
 
 interface ThinkingEffectProps {

packages/ui/src/components/primitives/Avatar/EmojiAvatar.tsx

@@ -1,7 +1,6 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
 import React, { memo } from 'react'
 
-import { cn } from '../../../utils'
-
 interface EmojiAvatarProps {
   children: string
   size?: number

packages/ui/src/components/primitives/Avatar/index.tsx

@@ -1,7 +1,7 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
 import type { AvatarProps as HeroUIAvatarProps } from '@heroui/react'
 import { Avatar as HeroUIAvatar, AvatarGroup as HeroUIAvatarGroup } from '@heroui/react'
 
-import { cn } from '../../../utils'
 import EmojiAvatar from './EmojiAvatar'
 
 export interface AvatarProps extends Omit<HeroUIAvatarProps, 'size'> {

packages/ui/src/components/primitives/badge.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 import * as React from 'react'

packages/ui/src/components/primitives/breadcrumb.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { Slot } from '@radix-ui/react-slot'
 import { ChevronRight, MoreHorizontal } from 'lucide-react'
 import * as React from 'react'

packages/ui/src/components/primitives/button.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Loader } from 'lucide-react'

packages/ui/src/components/primitives/checkbox.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { CheckIcon } from 'lucide-react'

packages/ui/src/components/primitives/combobox.tsx

@@ -10,7 +10,7 @@ import {
   CommandList
 } from '@cherrystudio/ui/components/primitives/command'
 import { Popover, PopoverContent, PopoverTrigger } from '@cherrystudio/ui/components/primitives/popover'
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Check, ChevronDown, X } from 'lucide-react'
 import * as React from 'react'

packages/ui/src/components/primitives/command.tsx

@@ -5,7 +5,7 @@ import {
   DialogHeader,
   DialogTitle
 } from '@cherrystudio/ui/components/primitives/dialog'
-import { cn } from '@cherrystudio/ui/utils'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { Command as CommandPrimitive } from 'cmdk'
 import { SearchIcon } from 'lucide-react'
 import * as React from 'react'

packages/ui/src/components/primitives/dialog.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { XIcon } from 'lucide-react'
 import * as React from 'react'

packages/ui/src/components/primitives/input-group.tsx

@@ -3,7 +3,7 @@ import type { InputProps } from '@cherrystudio/ui/components/primitives/input'
 import { Input } from '@cherrystudio/ui/components/primitives/input'
 import type { TextareaInputProps } from '@cherrystudio/ui/components/primitives/textarea'
 import * as Textarea from '@cherrystudio/ui/components/primitives/textarea'
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 import * as React from 'react'
 

packages/ui/src/components/primitives/input.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import * as React from 'react'
 
 interface InputProps extends React.ComponentProps<'input'> {}

packages/ui/src/components/primitives/kbd.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 
 function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
   return (

packages/ui/src/components/primitives/pagination.tsx

@@ -1,6 +1,6 @@
 import type { Button } from '@cherrystudio/ui/components/primitives/button'
 import { buttonVariants } from '@cherrystudio/ui/components/primitives/button'
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
 import * as React from 'react'
 

packages/ui/src/components/primitives/popover.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { cn } from '@cherrystudio/ui/utils'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import * as React from 'react'
 

packages/ui/src/components/primitives/radioGroup.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { CircleIcon } from 'lucide-react'

packages/ui/src/components/primitives/select.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'

packages/ui/src/components/primitives/shadcn-io/dropzone/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Button } from '@cherrystudio/ui/components/primitives/button'
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { UploadIcon } from 'lucide-react'
 import type { ReactNode } from 'react'
 import { createContext, use } from 'react'

packages/ui/src/components/primitives/switch.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import * as SwitchPrimitive from '@radix-ui/react-switch'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'

packages/ui/src/components/primitives/tabs.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { cva } from 'class-variance-authority'
 import * as React from 'react'

packages/ui/src/components/primitives/textarea.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import { composeEventHandlers } from '@radix-ui/primitive'
 import { useCallbackRef } from '@radix-ui/react-use-callback-ref'
 import { useControllableState } from '@radix-ui/react-use-controllable-state'

packages/ui/src/components/primitives/tooltip_new.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui/utils/index'
+import { cn } from '@cherrystudio/ui/lib/utils'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import * as React from 'react'
 

packages/ui/src/lib/utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal utilities for UI components.
+ *
+ * This module is for INTERNAL use only and should NOT be exposed to external consumers.
+ * External utilities should be placed in `utils/` instead.
+ *
+ * @internal
+ */
+
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Merges Tailwind CSS class names with conflict resolution.
+ * Combines clsx for conditional classes and tailwind-merge for deduplication.
+ *
+ * @example
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ * cn('text-red-500', isActive && 'text-blue-500')
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

packages/ui/src/utils/index.ts

@@ -1,13 +1,11 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
 /**
- * Merge class names with tailwind-merge
+ * Public utility functions for external consumers.
- * This utility combines clsx and tailwind-merge for optimal class name handling
+ *
+ * This module is part of the PUBLIC API and can be imported via `@cherrystudio/ui/utils`.
+ * For internal-only utilities (e.g., Tailwind class merging), use `lib/` instead.
+ *
+ * @module utils
  */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
 
 /**
  * Converts `null` to `undefined`, otherwise returns the input value.

src/renderer/src/components/Avatar/ModelAvatar.tsx

@@ -1,7 +1,8 @@
 import type { AvatarProps } from '@cherrystudio/ui'
-import { Avatar, cn } from '@cherrystudio/ui'
+import { Avatar } from '@cherrystudio/ui'
 import { getModelLogo } from '@renderer/config/models'
 import type { Model } from '@renderer/types'
+import { cn } from '@renderer/utils'
 import { first } from 'lodash'
 import type { FC } from 'react'
 

src/renderer/src/components/Buttons/ActionIconButton.tsx

@@ -1,4 +1,5 @@
-import { Button, cn } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
+import { cn } from '@renderer/utils'
 import React, { memo } from 'react'
 
 interface ActionIconButtonProps extends Omit<React.ComponentProps<'button'>, 'ref'> {

src/renderer/src/components/ProviderAvatar.tsx

@@ -1,7 +1,8 @@
-import { Avatar, cn } from '@cherrystudio/ui'
+import { Avatar } from '@cherrystudio/ui'
 import { PoeLogo } from '@renderer/components/Icons'
 import { getProviderLogo } from '@renderer/config/providers'
 import type { Provider } from '@renderer/types'
+import { cn } from '@renderer/utils'
 import { generateColorFromChar, getFirstCharacter, getForegroundColor } from '@renderer/utils'
 import React from 'react'
 

src/renderer/src/pages/home/Messages/NewTopicButton.tsx

@@ -1,8 +1,9 @@
 import { FormOutlined } from '@ant-design/icons'
-import { Button, cn } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { EventEmitter } from '@renderer/services/EventService'
 import { EVENT_NAMES } from '@renderer/services/EventService'
+import { cn } from '@renderer/utils'
 import { ThemeMode } from '@shared/data/preference/preferenceTypes'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'

src/renderer/src/pages/home/Tabs/components/AddButton.tsx

@@ -1,4 +1,5 @@
-import { Button, cn } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
+import { cn } from '@renderer/utils'
 import { PlusIcon } from 'lucide-react'
 
 const AddButton = ({ children, className, ...props }) => {

src/renderer/src/pages/settings/index.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@cherrystudio/ui'
+import { cn } from '@renderer/utils'
 import type { ThemeMode } from '@shared/data/preference/preferenceTypes'
 import { Divider } from 'antd'
 import Link from 'antd/es/typography/Link'