@hanzo/ui 4.6.0 → 4.8.2

package/frameworks/vue/index.ts

@@ -0,0 +1,9 @@
+// Vue components entry point
+// Export all Vue components for @hanzo/ui
+
+export * from './components'
+export * from './composables'
+export * from './utils'
+
+// Re-export core utilities
+export { cn } from '../core/utils'

package/frameworks/vue/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@hanzo/ui-vue",
+  "version": "1.0.0",
+  "exports": {
+    ".": "./index.ts",
+    "./components": "./components/index.ts"
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.6.0",
-  "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
+  "version": "4.8.2",
+  "description": "Multi-framework UI library with React, Vue, Svelte, and React Native support. Based on shadcn/ui with comprehensive framework coverage.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public",
@@ -9,6 +9,27 @@
   },
   "author": "Hanzo AI, Inc.",
   "license": "BSD-3-Clause",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "style",
+    "bin",
+    "primitives",
+    "blocks",
+    "components",
+    "assets",
+    "frameworks",
+    "helpers",
+    "types",
+    "util",
+    "src",
+    "tailwind",
+    "README.md",
+    "LICENSE"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hanzoai/react-sdk.git",
@@ -31,11 +52,21 @@
   "scripts": {
     "lat": "npm show @hanzo/ui version",
     "pub": "npm publish",
-    "tc": "tsc",
-    "build": "tsc -p tsconfig.json",
+    "tc": "tsc --project tsconfig.build.json",
+    "build": "npm run clean && npm run build:tsup",
+    "build:tsup": "tsup --config tsup.config.minimal.ts",
+    "build:full": "tsup --config tsup.config.production.ts",
+    "build:frameworks": "npm run build",
+    "build:watch": "tsup --watch",
+    "build:check": "tsc --project tsconfig.build.json --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build",
     "update-registry": "node ./bin/update-registry.js",
     "registry:mcp": "node ./bin/cli.js registry:mcp",
-    "registry:mcp:http": "node ./bin/cli.js registry:mcp --http"
+    "registry:mcp:http": "node ./bin/cli.js registry:mcp --http",
+    "analyze:frameworks": "node analyze-frameworks.js",
+    "test": "jest test/multi-framework.test.js",
+    "test:frameworks": "jest test/multi-framework.test.js --verbose"
   },
   "bin": {
     "@hanzo/ui": "./bin/cli.js",
@@ -43,30 +74,154 @@
   },
   "exports": {
     ".": {
-      "import": "./primitives/index-next.ts",
-      "require": "./primitives/index-common.ts",
-      "default": "./primitives/index-next.ts"
-    },
-    "./assets": "./assets/index.ts",
-    "./blocks": "./blocks/index.ts",
-    "./components": "./components/index.ts",
-    "./primitives": "./primitives/index-next.ts",
-    "./primitives-common": "./primitives/index-common.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./assets": {
+      "types": "./assets/index.ts",
+      "import": "./assets/index.ts",
+      "require": "./assets/index.ts"
+    },
+    "./helpers": {
+      "types": "./helpers/index.ts",
+      "import": "./helpers/index.ts",
+      "require": "./helpers/index.ts"
+    },
+    "./blocks": {
+      "types": "./dist/blocks/index.d.ts",
+      "import": "./dist/blocks/index.mjs",
+      "require": "./dist/blocks/index.js"
+    },
+    "./blocks/*": {
+      "types": "./dist/blocks/*.d.ts",
+      "import": "./dist/blocks/*.mjs",
+      "require": "./dist/blocks/*.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.mjs",
+      "require": "./dist/components/*.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives/index-next.d.ts",
+      "import": "./dist/primitives/index-next.mjs",
+      "require": "./dist/primitives/index-next.js"
+    },
+    "./primitives/*": {
+      "types": "./dist/primitives/*.d.ts",
+      "import": "./dist/primitives/*.mjs",
+      "require": "./dist/primitives/*.js"
+    },
+    "./primitives-common": {
+      "types": "./dist/primitives/index-common.d.ts",
+      "import": "./dist/primitives/index-common.mjs",
+      "require": "./dist/primitives/index-common.js"
+    },
     "./registry": {
-      "types": "./dist/registry/index.d.ts",
-      "default": "./dist/registry/index.js"
+      "types": "./dist/src/registry/index.d.ts",
+      "import": "./dist/src/registry/index.mjs",
+      "require": "./dist/src/registry/index.js"
     },
+    "./hooks": {
+      "types": "./dist/src/hooks/index.d.ts",
+      "import": "./dist/src/hooks/index.mjs",
+      "require": "./dist/src/hooks/index.js"
+    },
+    "./style": "./style",
     "./style/*": "./style/*",
-    "./tailwind": "./tailwind/index.ts",
-    "./types": "./types/index.ts",
-    "./util": "./util/index.ts",
-    "./util-client": "./util/index-client.ts",
-    "./utils": "./src/utils.ts",
-    "./lib/utils": "./src/utils.ts",
+    "./tailwind": {
+      "types": "./dist/tailwind/index.d.ts",
+      "import": "./dist/tailwind/index.mjs",
+      "require": "./dist/tailwind/index.js"
+    },
+    "./tailwind/*": {
+      "types": "./dist/tailwind/*.d.ts",
+      "import": "./dist/tailwind/*.mjs",
+      "require": "./dist/tailwind/*.js"
+    },
+    "./tailwind/config": {
+      "types": "./dist/tailwind/tailwind.config.hanzo-preset.d.ts",
+      "import": "./tailwind/tailwind.config.hanzo-preset.js",
+      "require": "./tailwind/tailwind.config.hanzo-preset.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.mjs",
+      "require": "./dist/types/index.js"
+    },
+    "./types/*": {
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/types/*.mjs",
+      "require": "./dist/types/*.js"
+    },
+    "./util": {
+      "types": "./dist/util/index.d.ts",
+      "import": "./dist/util/index.mjs",
+      "require": "./dist/util/index.js"
+    },
+    "./util/*": {
+      "types": "./dist/util/*.d.ts",
+      "import": "./dist/util/*.mjs",
+      "require": "./dist/util/*.js"
+    },
+    "./util/format-text": {
+      "types": "./dist/util/format-text.d.ts",
+      "import": "./dist/util/format-text.mjs",
+      "require": "./dist/util/format-text.js"
+    },
+    "./util-client": {
+      "types": "./dist/util/index-client.d.ts",
+      "import": "./dist/util/index-client.mjs",
+      "require": "./dist/util/index-client.js"
+    },
+    "./utils": {
+      "types": "./dist/src/utils.d.ts",
+      "import": "./dist/src/utils.mjs",
+      "require": "./dist/src/utils.js"
+    },
+    "./lib/utils": {
+      "types": "./dist/src/utils.d.ts",
+      "import": "./dist/src/utils.mjs",
+      "require": "./dist/src/utils.js"
+    },
     "./mcp": {
-      "types": "./dist/mcp/index.d.ts",
-      "default": "./dist/mcp/index.js"
-    }
+      "types": "./dist/src/mcp/index.d.ts",
+      "import": "./dist/src/mcp/index.mjs",
+      "require": "./dist/src/mcp/index.js"
+    },
+    "./theme-provider": {
+      "types": "./dist/style/theme-provider.d.ts",
+      "import": "./dist/style/theme-provider.mjs",
+      "require": "./dist/style/theme-provider.js"
+    },
+    "./react": {
+      "types": "./dist/frameworks/react/index.d.ts",
+      "import": "./dist/frameworks/react/index.mjs",
+      "require": "./dist/frameworks/react/index.js"
+    },
+    "./vue": {
+      "types": "./dist/frameworks/vue/index.d.ts",
+      "import": "./dist/frameworks/vue/index.mjs",
+      "require": "./dist/frameworks/vue/index.js"
+    },
+    "./svelte": {
+      "svelte": "./frameworks/svelte/index.ts",
+      "types": "./dist/frameworks/svelte/index.d.ts",
+      "import": "./dist/frameworks/svelte/index.mjs",
+      "require": "./dist/frameworks/svelte/index.js"
+    },
+    "./react-native": {
+      "types": "./dist/frameworks/react-native/index.d.ts",
+      "import": "./dist/frameworks/react-native/index.mjs",
+      "require": "./dist/frameworks/react-native/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "dependencies": {
     "@hanzo/react-drawer": "^0.1.8",
@@ -100,26 +255,33 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@radix-ui/react-use-callback-ref": "^1.1.1",
-    "@splinetool/react-spline": "^4.0.0",
-    "@splinetool/runtime": "^1.9.35",
     "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.0",
     "commander": "^12.1.0",
-    "date-fns": "^4.1.0",
+    "date-fns": "^3.6.0",
     "embla-carousel-react": "8.5.1",
+    "filesize": "^11.0.2",
+    "framer-motion": "^11.15.0",
     "input-otp": "^1.0.1",
     "lodash.castarray": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
     "lodash.merge": "^4.6.2",
+    "lucide-react": "0.456.0",
     "markdown-to-jsx": "^7.7.13",
     "mermaid": "^11.12.0",
     "postcss-selector-parser": "^6.0.16",
     "qrcode.react": "^4.2.0",
     "react-day-picker": "^8.10.1",
+    "react-dropzone": "^14.3.5",
     "react-intersection-observer": "^9.8.2",
+    "react-markdown": "^9.0.3",
     "react-resizable-panels": "^3.0.6",
+    "react-syntax-highlighter": "^15.6.1",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "sonner": "^1.4.41",
     "sql.js": "^1.13.0",
     "svg-pan-zoom": "^3.6.2",
@@ -154,7 +316,9 @@
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.1",
     "glob": "^11.0.2",
+    "jest": "^30.1.3",
     "tailwindcss": "3.4.14",
+    "tsup": "^8.5.0",
     "typescript": "5.6.3"
   }
 }

package/primitives/accordion.tsx

@@ -1,6 +1,6 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/alert-dialog.tsx

@@ -1,5 +1,5 @@
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 import { buttonVariants } from './button';

package/primitives/alert.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/avatar.tsx

@@ -1,5 +1,5 @@
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/badge.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 
@@ -42,3 +42,4 @@ const Badge = ({ className, variant, ...props }: BadgeProps) => {
 Badge.displayName = 'Badge';
 
 export { Badge, badgeVariants };
+export default Badge;

package/primitives/breadcrumb.tsx

@@ -1,6 +1,6 @@
 import { Slot } from '@radix-ui/react-slot';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/button.tsx

@@ -1,43 +1,41 @@
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Loader2 } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 border border-transparent text-sm font-semibold transition-colors focus-visible:ring-1 focus-visible:ring-gray-50 focus-visible:outline-hidden focus-visible:ring-inset',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
         default:
-          'bg-brand hover:bg-brand-500 text-black disabled:bg-gray-800 disabled:text-gray-400 disabled:opacity-60',
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
         destructive:
-          'disabled:text-text-secondary bg-red-500 text-white hover:bg-red-500/90 disabled:bg-gray-600',
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border border-gray-600 bg-transparent text-white hover:border-gray-400 hover:bg-gray-900 hover:text-white',
-        tertiary:
-          'bg-transparent text-gray-300 hover:bg-gray-900 hover:text-white',
-        link: 'text-white underline-offset-4 hover:underline',
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        // Keep the additional Hanzo variants for backward compatibility
+        primary:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        linkFG: 'text-primary underline-offset-4 hover:underline',
+        linkMuted: 'text-muted-foreground underline-offset-4 hover:underline hover:text-foreground',
       },
       size: {
-        default: 'h-[50px] px-8 text-sm',
-        xs: 'h-[34px] gap-1.5 px-3 text-xs',
-        sm: 'h-[36px] gap-1.5 px-3 text-xs',
-        md: 'h-[40px] gap-1.5 px-3 text-xs',
-        lg: 'h-[48px] gap-2 px-2 text-sm',
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
         icon: 'h-9 w-9',
-        auto: 'h-auto p-4',
-      },
-      rounded: {
-        full: 'rounded-full',
-        lg: 'rounded-lg',
       },
     },
     defaultVariants: {
       variant: 'default',
       size: 'default',
-      rounded: 'full',
     },
   },
 );
@@ -47,36 +45,28 @@ export interface ButtonProps
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
   isLoading?: boolean;
-  ref?: React.RefObject<HTMLButtonElement>;
 }
 
-const Button = ({
-  className,
-  variant,
-  size,
-  rounded,
-  asChild = false,
-  isLoading = false,
-  ref,
-  ...props
-}: ButtonProps) => {
-  const Comp = asChild ? Slot : 'button';
-  return (
-    <Comp
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props}
-    >
-      {isLoading ? (
-        <Loader2
-          className={cn('h-4 w-4 animate-spin', size !== 'icon' && 'mr-2')}
-        />
-      ) : null}
-      {isLoading && size === 'icon' ? null : props.children}
-    </Comp>
-  );
-};
-
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      >
+        {isLoading ? (
+          <Loader2
+            className={cn('h-4 w-4 animate-spin', size !== 'icon' && 'mr-2')}
+          />
+        ) : null}
+        {isLoading && size === 'icon' ? null : children}
+      </Comp>
+    );
+  }
+);
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };
+export default Button; // Keep default export for backward compatibility

package/primitives/card.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 

package/primitives/carousel.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import * as React from 'react'
+import React from 'react';
 import useEmblaCarousel from 'embla-carousel-react'
-import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
+// @ts-ignore
+const { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } = {}
 
 import { ArrowLeft, ArrowRight } from 'lucide-react'
 

package/primitives/chat/chat-input-area.tsx

@@ -1,8 +1,9 @@
-import { useTranslation } from '@hanzo_network/hanzo-i18n';
-import * as React from 'react';
+// import { useTranslation } from '@hanzo_network/hanzo-i18n';
+const useTranslation = () => ({ t: (key) => key });
+import React from 'react';
 
-import { useCombinedRefs } from '../../hooks/use-combined-refs';
-import { cn } from '../src/utils';
+import { useCombinedRefs } from '../../src/hooks/use-combined-refs';
+import { cn } from '../../src/utils';
 import { ChatInput } from './chat-input';
 
 type ChatInputAreaProps = {

package/primitives/chat/chat-input.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import React from 'react';
 
-import { cn } from '../src/utils';
+import { cn } from '../../src/utils';
 
 export interface ChatInputProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {

package/primitives/chat/files-preview.tsx

@@ -3,10 +3,11 @@ import {
   type Attachment,
   FileTypeSupported,
 } from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
-import { save } from '@tauri-apps/plugin-dialog';
-import * as fs from '@tauri-apps/plugin-fs';
-import { BaseDirectory } from '@tauri-apps/plugin-fs';
-import { partial } from 'filesize';
+// import { save } from '@tauri-apps/plugin-dialog'; // Not available in web environment
+// import * as fs from '@tauri-apps/plugin-fs'; // Not available in web environment
+// import { BaseDirectory } from '@tauri-apps/plugin-fs'; // Not available in web environment
+// import { partial } from 'filesize';
+const partial = () => (bytes) => `${(bytes / 1024 / 1024).toFixed(2)} MB`;
 import { AnimatePresence, motion } from 'framer-motion';
 import { CircleSlashIcon, XIcon } from 'lucide-react';
 import React, { useState } from 'react';

package/primitives/chat/message-list.tsx

@@ -1,4 +1,5 @@
-import { ChatConversationInfiniteData } from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
+// import { ChatConversationInfiniteData } from '@hanzo_network/hanzo-node-state/v2/queries/getChatConversation/types';
+type ChatConversationInfiniteData = any;
 import {
   type FetchPreviousPageOptions,
   type InfiniteQueryObserverResult,

package/primitives/chat/sqlite-preview.tsx

@@ -1,4 +1,4 @@
-import { debug } from '@tauri-apps/plugin-log';
+// import { debug } from '@tauri-apps/plugin-log'; // Not available in web environment
 import { useEffect, useState } from 'react';
 import * as sqljs from 'sql.js';
 
@@ -13,9 +13,9 @@ const loadTableData = async (
   db: sqljs.Database,
   tableName: string,
 ): Promise<{ values: sqljs.SqlValue[][] }> => {
-  void debug(`loading table data for ${tableName}`);
+  void console.log(`loading table data for ${tableName}`);
   const dataResult = db.exec(`SELECT * FROM ${tableName}`);
-  void debug(`found ${dataResult[0].values.length} rows for ${tableName}`);
+  void console.log(`found ${dataResult[0].values.length} rows for ${tableName}`);
   return { values: dataResult[0].values };
 };
 
@@ -25,7 +25,7 @@ const loadDatabase = async (
   db: sqljs.Database;
   tables: { name: string; columns: sqljs.SqlValue[]; count: number }[];
 }> => {
-  void debug(`loading database from ${url}`);
+  void console.log(`loading database from ${url}`);
   const SQL = await sqljs.default({
     locateFile: (file: string) => '/sqljs/sql-wasm.wasm',
   });
@@ -39,14 +39,14 @@ const loadDatabase = async (
     "SELECT name FROM sqlite_master WHERE type='table'",
   );
   const tableNames = tablesResult[0].values.map((v) => v[0] as string);
-  void debug(`found ${tableNames.length} tables`);
-  void debug(`tables: ${tableNames.join(', ')}`);
+  void console.log(`found ${tableNames.length} tables`);
+  void console.log(`tables: ${tableNames.join(', ')}`);
   const tables = tableNames.map((table) => {
     const columnsResult = db.exec(`PRAGMA table_info(${table})`);
     const columnNames = columnsResult[0].values.map((v) => v[1]);
     const countResult = db.exec(`SELECT COUNT(*) FROM ${table}`);
     const count = countResult[0].values[0][0] as number;
-    void debug(
+    void console.log(
       `found columns ${columnNames.join(', ')} and ${count} rows for ${table}`,
     );
     return {
@@ -128,7 +128,7 @@ export const SqlitePreview: React.FC<SqlitePreviewProps> = ({ url }) => {
   useEffect(() => {
     return () => {
       if (db) {
-        void debug('closing database connection');
+        void console.log('closing database connection');
         db.close();
       }
     };

package/primitives/checkbox.tsx

@@ -1,6 +1,6 @@
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 
@@ -29,3 +29,4 @@ const Checkbox = ({ className, ref, ...props }: CheckboxProps) => (
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };
+export default Checkbox;

package/primitives/command.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import { DialogProps } from '@radix-ui/react-dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import { Search } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';
 import { Dialog, DialogContent } from './dialog';

package/primitives/context-menu.tsx

@@ -1,6 +1,6 @@
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
-import * as React from 'react';
+import React from 'react';
 
 import { cn } from '../src/utils';