feat: Uniformly use "interface" as the type definition

Ohh-889 · Ohh-889 · commit 618416a2d62f · 2025-07-15T03:22:26.000+08:00
diff --git a/packages/ui-variants/package.json b/packages/ui-variants/package.json
@@ -1,27 +1,35 @@
 {
   "name": "@soybean-react-ui/variants",
-  "version": "0.0.2-beta.5",
+  "type": "module",
+  "version": "0.0.1",
+  "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
     }
   },
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "typings": "./dist/index.d.ts",
-  "files": ["./dist"],
+  "files": ["dist"],
   "scripts": {
-    "build": "vite build"
+    "build": "tsdown",
+    "dev": "tsdown --watch  ./src/index.ts"
   },
   "dependencies": {
     "clsx": "2.1.1",
     "tailwind-merge": "3.3.0",
     "tailwind-variants": "1.0.0"
+  },
+  "devDependencies": {
+    "fast-glob": "^3.3.3",
+    "tsdown": "^0.12.9",
+    "typescript": "5.8.2"
   }
 }
diff --git a/packages/ui-variants/src/shared/index.ts b/packages/ui-variants/src/shared/index.ts
@@ -5,3 +5,5 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export { clsx };
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -2,7 +2,7 @@
   "name": "soybean-react-ui",
   "type": "module",
   "version": "0.0.1",
-  "private": true,
+  "private": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,8 +25,12 @@
   "types": "./dist/index.d.ts",
   "files": ["dist"],
   "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch  ./src/index.ts"
+    "build": "pnpm build:variants && pnpm build:ui ",
+    "build:ui": "tsdown",
+    "build:variants": "pnpm --filter @soybean-react-ui/variants build",
+    "dev": "pnpm dev:variants & pnpm dev:ui",
+    "dev:ui": "tsdown --watch  ./src/index.ts",
+    "dev:variants": "pnpm --filter @soybean-react-ui/variants dev"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.11",
diff --git a/packages/ui/src/components/accordion/source/AccordionContent.tsx b/packages/ui/src/components/accordion/source/AccordionContent.tsx
@@ -1,10 +1,11 @@
 import { Content } from '@radix-ui/react-accordion';
 import { accordionVariants, cn } from '@soybean-react-ui/variants';
+import type { ComponentRef } from 'react';
 import { forwardRef } from 'react';
 
 import type { AccordionContentProps } from '../types';
 
-const AccordionContent = forwardRef<React.ElementRef<typeof Content>, AccordionContentProps>((props, ref) => {
+const AccordionContent = forwardRef<ComponentRef<typeof Content>, AccordionContentProps>((props, ref) => {
   const { className, size, ...rest } = props;
 
   const { content } = accordionVariants({ size });
diff --git a/packages/ui/src/components/accordion/types.ts b/packages/ui/src/components/accordion/types.ts
@@ -7,20 +7,20 @@ import type {
   AccordionSingleProps,
   AccordionTriggerProps as _AccordionTriggerProps
 } from '@radix-ui/react-accordion';
-import type { AccordionSlots, ClassValue, ThemeSize } from '@soybean-react-ui/variants';
+import type { AccordionSlots } from '@soybean-react-ui/variants';
 
-import type { BaseNodeProps, PropsSlot } from '../../types/other';
+import type { BaseNodeProps, ClassValue, PropsSlot, ThemeSize } from '../../types/other';
 
 /** The ui of the accordion. */
 export type AccordionUi = Partial<Record<AccordionSlots, ClassValue>>;
 
 export type AccordionRootProps = BaseNodeProps<AccordionSingleProps> | BaseNodeProps<AccordionMultipleProps>;
 
-export type AccordionHeaderProps = BaseNodeProps<_AccordionHeaderProps>;
+export interface AccordionHeaderProps extends BaseNodeProps<_AccordionHeaderProps> {}
 
-export type AccordionContentProps = BaseNodeProps<_AccordionContentProps>;
+export interface AccordionContentProps extends BaseNodeProps<_AccordionContentProps> {}
 
-export type AccordionItemProps = BaseNodeProps<_AccordionItemProps>;
+export interface AccordionItemProps extends BaseNodeProps<_AccordionItemProps> {}
 
 export interface AccordionTriggerProps extends BaseNodeProps<_AccordionTriggerProps>, PropsSlot {
   /** The ui of the accordion trigger. */
diff --git a/packages/ui/src/components/alert-dialog/types.ts b/packages/ui/src/components/alert-dialog/types.ts
@@ -16,17 +16,17 @@ export type AlertDialogUi = Partial<Record<DialogSlots, ClassValue>> & {
 
 export type AlertType = Extract<ThemeColor, 'destructive' | 'info' | 'success' | 'warning'>;
 
-export type AlertDialogContentProps = BaseNodeProps<_AlertDialogContentProps>;
+export interface AlertDialogContentProps extends BaseNodeProps<_AlertDialogContentProps> {}
 
-export type AlertDialogDescriptionProps = BaseNodeProps<_AlertDialogDescriptionProps>;
+export interface AlertDialogDescriptionProps extends BaseNodeProps<_AlertDialogDescriptionProps> {}
 
 export type AlertDialogFooterProps = BaseComponentProps<'div'>;
 
 export type AlertDialogHeaderProps = BaseComponentProps<'div'>;
 
-export type AlertDialogOverlayProps = BaseNodeProps<_AlertDialogOverlayProps>;
+export interface AlertDialogOverlayProps extends BaseNodeProps<_AlertDialogOverlayProps> {}
 
-export type AlertDialogTitleProps = BaseNodeProps<_AlertDialogTitleProps>;
+export interface AlertDialogTitleProps extends BaseNodeProps<_AlertDialogTitleProps> {}
 
 export type AlertDialogProps = BaseNodeProps<_AlertDialogProps> &
   AlertDialogContentProps &
diff --git a/packages/ui/src/components/aspect-ratio/types.ts b/packages/ui/src/components/aspect-ratio/types.ts
@@ -2,4 +2,4 @@ import type { AspectRatioProps as _AspectRatioProps } from '@radix-ui/react-aspe
 
 import type { BaseNodeProps } from '../../types/other';
 
-export type AspectRatioProps = BaseNodeProps<_AspectRatioProps>;
+export interface AspectRatioProps extends BaseNodeProps<_AspectRatioProps> {}
diff --git a/packages/ui/src/components/avatar/types.ts b/packages/ui/src/components/avatar/types.ts
@@ -9,11 +9,11 @@ import type { BaseNodeProps, ClassValue } from '../../types/other';
 
 export type AvatarUi = Partial<Record<AvatarSlots, ClassValue>>;
 
-export type AvatarRootProps = BaseNodeProps<_AvatarRootProps>;
+export interface AvatarRootProps extends BaseNodeProps<_AvatarRootProps> {}
 
-export type AvatarFallbackProps = BaseNodeProps<_AvatarFallbackProps>;
+export interface AvatarFallbackProps extends BaseNodeProps<_AvatarFallbackProps> {}
 
-export type AvatarImageProps = BaseNodeProps<_AvatarImageProps>;
+export interface AvatarImageProps extends BaseNodeProps<_AvatarImageProps> {}
 
 export interface AvatarProps extends AvatarImageProps, Pick<AvatarFallbackProps, 'delayMs'> {
   classNames?: AvatarUi;
diff --git a/packages/ui/src/components/checkbox/types.ts b/packages/ui/src/components/checkbox/types.ts
@@ -8,15 +8,15 @@ import type { BaseComponentProps, BaseNodeProps, ClassValue, ThemeColor } from '
 
 export type CheckboxUi = Partial<Record<CheckboxSlots, ClassValue>>;
 
-export type CheckboxControlProps = BaseNodeProps<_CheckboxRootProps> & {
+export interface CheckboxControlProps extends BaseNodeProps<_CheckboxRootProps> {
   color?: ThemeColor;
-};
+}
 
-export type CheckboxIndicatorProps = BaseNodeProps<_CheckboxIndicatorProps>;
+export interface CheckboxIndicatorProps extends BaseNodeProps<_CheckboxIndicatorProps> {}
 
-export type CheckboxRootProps = BaseComponentProps<'div'>;
+export interface CheckboxRootProps extends BaseComponentProps<'div'> {}
 
-export type CheckboxProps = CheckboxControlProps & {
+export interface CheckboxProps extends CheckboxControlProps {
   classNames?: CheckboxUi;
   forceMountIndicator?: true;
-};
+}
diff --git a/packages/ui/src/components/label/types.ts b/packages/ui/src/components/label/types.ts
@@ -2,4 +2,4 @@ import type { LabelProps as _LabelProps } from '@radix-ui/react-label';
 
 import type { BaseNodeProps } from '../../types';
 
-export type LabelProps = BaseNodeProps<_LabelProps>;
+export interface LabelProps extends BaseNodeProps<_LabelProps> {}
diff --git a/packages/ui/src/components/scroll-area/types.ts b/packages/ui/src/components/scroll-area/types.ts
@@ -1,21 +1,22 @@
 import type {
   ScrollAreaProps as _ScrollAreaProps,
   ScrollAreaScrollbarProps as _ScrollAreaScrollbarProps,
-  ScrollAreaViewportProps as _ScrollAreaViewportProps
+  ScrollAreaViewportProps as _ScrollAreaViewportProps,
+  ScrollAreaThumbProps as _ScrollAreaThumbProps
 } from '@radix-ui/react-scroll-area';
 import type { ClassValue, ClassValueProp, ScrollAreaSlots } from '@soybean-react-ui/variants';
 
 import type { BaseNodeProps } from '../../types/other';
 
 export type ScrollAreaUi = Partial<Record<ScrollAreaSlots, ClassValue>>;
 
-export type ScrollAreaRootProps = BaseNodeProps<_ScrollAreaProps>;
+export interface ScrollAreaRootProps extends BaseNodeProps<_ScrollAreaProps> {}
 
-export type ScrollAreaScrollbarProps = BaseNodeProps<_ScrollAreaScrollbarProps>;
+export interface ScrollAreaScrollbarProps extends BaseNodeProps<_ScrollAreaScrollbarProps> {}
 
-export type ScrollAreaThumbProps = ClassValueProp;
+export interface ScrollAreaThumbProps extends BaseNodeProps<_ScrollAreaThumbProps> {}
 
-export type ScrollAreaViewportProps = BaseNodeProps<_ScrollAreaViewportProps>;
+export interface ScrollAreaViewportProps extends BaseNodeProps<_ScrollAreaViewportProps> {}
 
 export interface ScrollAreaProps
   extends ScrollAreaRootProps,
diff --git a/packages/ui/src/types/index.ts b/packages/ui/src/types/index.ts
@@ -1,3 +1 @@
-export type { ThemeAlign, ThemeColor, ThemeOrientation, ThemeSide, ThemeSize } from '@soybean-react-ui/variants';
-
 export * from './other';
diff --git a/packages/ui/src/types/other.ts b/packages/ui/src/types/other.ts
@@ -1,4 +1,11 @@
-import type { ClassValue, ThemeSize } from '@soybean-react-ui/variants';
+import type {
+  ClassValue,
+  ThemeAlign,
+  ThemeColor,
+  ThemeOrientation,
+  ThemeSide,
+  ThemeSize
+} from '@soybean-react-ui/variants';
 import type { ReactNode } from 'react';
 
 export type AsTag =
@@ -36,8 +43,6 @@ export interface PrimitiveProps {
   asChild?: boolean;
 }
 
-export type { ClassValue };
-
 export type BaseNodeProps<T> = Omit<T, 'className'> & {
   className?: ClassValue;
   size?: ThemeSize;
@@ -58,3 +63,5 @@ export type BaseComponentProps<T extends keyof React.JSX.IntrinsicElements> = Ba
 >;
 
 export type AcceptableValue = string | number | bigint | Record<string, any> | null;
+
+export type { ClassValue, ThemeAlign, ThemeColor, ThemeOrientation, ThemeSide, ThemeSize };

Original file line number	Diff line number	Diff line change
`@@ -5,3 +5,5 @@ import { twMerge } from 'tailwind-merge';`
`5`	`5`	`export function cn(...inputs: ClassValue[]) {`
`6`	`6`	`return twMerge(clsx(inputs));`
`7`	`7`	`}`
	`8`	`+`
	`9`	`+export { clsx };`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,4 @@ import type { AspectRatioProps as _AspectRatioProps } from '@radix-ui/react-aspe`
`2`	`2`
`3`	`3`	`import type { BaseNodeProps } from '../../types/other';`
`4`	`4`
`5`		`-export type AspectRatioProps = BaseNodeProps<_AspectRatioProps>;`
	`5`	`+export interface AspectRatioProps extends BaseNodeProps<_AspectRatioProps> {}`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,4 @@ import type { LabelProps as _LabelProps } from '@radix-ui/react-label';`
`2`	`2`
`3`	`3`	`import type { BaseNodeProps } from '../../types';`
`4`	`4`
`5`		`-export type LabelProps = BaseNodeProps<_LabelProps>;`
	`5`	`+export interface LabelProps extends BaseNodeProps<_LabelProps> {}`