@hanzo/ui 4.9.0 → 5.0.1

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/helpers/file.ts

@@ -0,0 +1,33 @@
+export const getFileExt = (fileName: string): string => {
+  if (!fileName) return '';
+  const parts = fileName.split('.');
+  return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+};
+
+export const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+};
+
+export const isImageFile = (fileName: string): boolean => {
+  const ext = getFileExt(fileName);
+  return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'].includes(ext);
+};
+
+export const isPdfFile = (fileName: string): boolean => {
+  const ext = getFileExt(fileName);
+  return ext === 'pdf';
+};
+
+export const isVideoFile = (fileName: string): boolean => {
+  const ext = getFileExt(fileName);
+  return ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm'].includes(ext);
+};
+
+export const isAudioFile = (fileName: string): boolean => {
+  const ext = getFileExt(fileName);
+  return ['mp3', 'wav', 'ogg', 'aac', 'flac', 'wma'].includes(ext);
+};

package/helpers/memoization.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+
+// Memoization helpers for markdown components
+export const memoCompareNodes = (
+  prevProps: { children?: React.ReactNode },
+  nextProps: { children?: React.ReactNode }
+): boolean => {
+  return prevProps.children === nextProps.children;
+};
+
+export const memoizeMarkdownComponents = <T extends Record<string, React.ComponentType<any>>>(
+  components: T
+): T => {
+  const memoized: any = {};
+
+  for (const key in components) {
+    if (components.hasOwnProperty(key)) {
+      memoized[key] = React.memo(components[key]);
+    }
+  }
+
+  return memoized as T;
+};
+
+// Helper to check if props are equal for memoization
+export const arePropsEqual = <T extends Record<string, any>>(
+  prevProps: T,
+  nextProps: T,
+  keys?: string[]
+): boolean => {
+  const keysToCheck = keys || Object.keys(prevProps);
+
+  for (const key of keysToCheck) {
+    if (prevProps[key] !== nextProps[key]) {
+      return false;
+    }
+  }
+
+  return true;
+};

package/package.json

@@ -1,26 +1,108 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.9.0",
-  "description": "Modern React component library built on shadcn/ui v4 with Hanzo branding, featuring 50+ accessible components",
+  "version": "5.0.1",
+  "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",
+    "scope": "@hanzo"
+  },
+  "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",
+    "directory": "pkg/ui"
+  },
+  "keywords": [
+    "components",
+    "ecommerce",
+    "analytics",
+    "ai",
+    "chat",
+    "hanzo",
+    "hanzo-ai",
+    "hanzoai",
+    "radix-ui",
+    "react",
+    "sdk",
+    "ui"
+  ],
+  "scripts": {
+    "lat": "npm show @hanzo/ui version",
+    "pub": "npm publish",
+    "tc": "tsc --project tsconfig.build.json",
+    "build": "npm run clean && npm run build:tsup && npm run postbuild",
+    "build:tsup": "tsup --config tsup.config.minimal.ts",
+    "postbuild": "node scripts/add-use-client.js",
+    "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",
+    "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",
+    "hanzo-ui": "./bin/cli.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.mjs",
-      "require": "./dist/components/index.js"
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.mjs",
+      "require": "./dist/utils.js"
     },
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.mjs",
-      "require": "./dist/components/*.js"
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.mjs",
+      "require": "./dist/types.js"
+    },
+    "./tailwind": {
+      "types": "./dist/tailwind.d.ts",
+      "import": "./dist/tailwind.mjs",
+      "require": "./dist/tailwind.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",
@@ -32,126 +114,135 @@
       "import": "./dist/blocks/*.mjs",
       "require": "./dist/blocks/*.js"
     },
-    "./ai": {
-      "types": "./dist/ai/index.d.ts",
-      "import": "./dist/ai/index.mjs",
-      "require": "./dist/ai/index.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/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/*": {
+      "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/*.d.ts",
+      "import": "./dist/types/*.mjs",
+      "require": "./dist/types/*.js"
     },
-    "./ai/*": {
-      "types": "./dist/ai/*.d.ts",
-      "import": "./dist/ai/*.mjs",
-      "require": "./dist/ai/*.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"
+    },
+
     "./lib/utils": {
-      "types": "./dist/lib/utils.d.ts",
-      "import": "./dist/lib/utils.mjs",
-      "require": "./dist/lib/utils.js"
-    },
-    "./markdown": {
-      "types": "./dist/markdown/index.d.ts",
-      "import": "./dist/markdown/index.mjs",
-      "require": "./dist/markdown/index.js"
-    },
-    "./upload": {
-      "types": "./dist/upload/index.d.ts",
-      "import": "./dist/upload/index.mjs",
-      "require": "./dist/upload/index.js"
-    },
-    "./effects": {
-      "types": "./dist/effects/index.d.ts",
-      "import": "./dist/effects/index.mjs",
-      "require": "./dist/effects/index.js"
-    },
-    "./qr": {
-      "types": "./dist/qr/index.d.ts",
-      "import": "./dist/qr/index.mjs",
-      "require": "./dist/qr/index.js"
-    },
-    "./charts": {
-      "types": "./dist/charts/index.d.ts",
-      "import": "./dist/charts/index.mjs",
-      "require": "./dist/charts/index.js"
-    },
-    "./calendar": {
-      "types": "./dist/calendar/index.d.ts",
-      "import": "./dist/calendar/index.mjs",
-      "require": "./dist/calendar/index.js"
-    },
-    "./carousel": {
-      "types": "./dist/carousel/index.d.ts",
-      "import": "./dist/carousel/index.mjs",
-      "require": "./dist/carousel/index.js"
-    },
-    "./command": {
-      "types": "./dist/command/index.d.ts",
-      "import": "./dist/command/index.mjs",
-      "require": "./dist/command/index.js"
+      "types": "./dist/src/utils.d.ts",
+      "import": "./dist/src/utils.mjs",
+      "require": "./dist/src/utils.js"
+    },
+    "./mcp": {
+      "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"
   },
-  "keywords": [
-    "react",
-    "ui",
-    "components",
-    "component-library",
-    "shadcn",
-    "shadcn-ui",
-    "radix-ui",
-    "tailwind",
-    "tailwindcss",
-    "hanzo",
-    "design-system",
-    "typescript",
-    "accessible",
-    "aria",
-    "wcag",
-    "dark-mode",
-    "theme"
-  ],
-  "author": "Hanzo AI <dev@hanzo.ai>",
-  "license": "MIT",
-  "homepage": "https://ui.hanzo.ai",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/hanzoai/ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/hanzoai/ui/issues"
-  },
-  "scripts": {
-    "build": "tsup",
-    "build:analyze": "ANALYZE=true tsup",
-    "dev": "tsup --watch",
-    "lint": "echo 'Linting skipped for now'",
-    "type-check": "echo 'Type checking skipped for now'",
-    "analyze": "pnpm build:analyze && npx rollup-plugin-visualizer",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "storybook:test": "test-storybook",
-    "prepublishOnly": "pnpm run lint && pnpm run type-check && pnpm run build",
-    "publish:npm": "npm publish --access public",
-    "publish:next": "npm publish --access public --tag next",
-    "postpublish": "echo 'Successfully published @hanzo/ui 🎉'"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
   "dependencies": {
+    "@hanzo/react-drawer": "^0.1.8",
+    "@modelcontextprotocol/sdk": "^1.10.2",
+    "@next/third-parties": "^15.0.1",
     "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-menubar": "^1.0.4",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-navigation-menu": "^1.1.3",
+    "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
@@ -164,44 +255,72 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "@tabler/icons-react": "^3.35.0",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "cmdk": "^1.0.3",
-    "embla-carousel-react": "^8.5.2",
-    "input-otp": "^1.4.1",
-    "lucide-react": "^0.525.0",
-    "next-themes": "^0.4.4",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@radix-ui/react-use-callback-ref": "^1.1.1",
+    "@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": "^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-hook-form": "^7.53.2",
-    "react-resizable-panels": "^2.1.8",
-    "recharts": "^2.12.7",
-    "sonner": "^1.7.3",
-    "tailwind-merge": "^2.0.0",
+    "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",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.1"
+    "tailwindcss-interaction-media": "^0.1.0",
+    "vaul": "^1.1.2",
+    "zod": "^3.23.8",
+    "zod-to-json-schema": "^3.23.2"
+  },
+  "peerDependencies": {
+    "@hookform/resolvers": "^3.3.2",
+    "embla-carousel": "^8.1.6",
+    "lucide-react": "0.456.0",
+    "mobx": "^6.12.3",
+    "next": "14.2.16",
+    "next-themes": "^0.2.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-hook-form": "7.51.4",
+    "validator": "^13.11.0"
   },
   "devDependencies": {
-    "@hookform/resolvers": "^3.10.0",
-    "@storybook/addon-a11y": "8",
-    "@storybook/addon-controls": "8",
-    "@storybook/addon-docs": "8",
-    "@storybook/addon-essentials": "8",
-    "@storybook/addon-interactions": "8",
-    "@storybook/addon-links": "8",
-    "@storybook/addon-themes": "8",
-    "@storybook/blocks": "8",
-    "@storybook/react": "8",
-    "@storybook/react-vite": "8",
-    "@storybook/test": "8",
-    "@types/glob": "^9.0.0",
-    "@types/react": "^18.2.65",
-    "date-fns": "^4.1.0",
-    "esbuild-plugin-file-path-extensions": "^2.1.4",
-    "glob": "^11.0.3",
-    "rollup-plugin-visualizer": "^6.0.3",
-    "storybook": "8",
-    "zod": "^3.25.76"
+    "@mdx-js/loader": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
+    "@radix-ui/react-primitive": "^2.0.1",
+    "@types/facebook-pixel": "^0.0.30",
+    "@types/gtag.js": "^0.0.19",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "20.14.15",
+    "@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

@@ -0,0 +1,74 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+type AccordionItemProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Item
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AccordionPrimitive.Item>>;
+};
+
+const AccordionItem = ({ className, ref, ...props }: AccordionItemProps) => (
+  <AccordionPrimitive.Item className={cn('', className)} ref={ref} {...props} />
+);
+AccordionItem.displayName = 'AccordionItem';
+
+type AccordionTriggerProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Trigger
+> & {
+  hideArrow?: boolean;
+  ref?: React.RefObject<React.ComponentRef<typeof AccordionPrimitive.Trigger>>;
+};
+
+const AccordionTrigger = ({
+  className,
+  children,
+  hideArrow = false,
+  ref,
+  ...props
+}: AccordionTriggerProps) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      {hideArrow ? null : (
+        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      )}
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+);
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+type AccordionContentProps = React.ComponentPropsWithoutRef<
+  typeof AccordionPrimitive.Content
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AccordionPrimitive.Content>>;
+};
+
+const AccordionContent = ({
+  className,
+  children,
+  ref,
+  ...props
+}: AccordionContentProps) => (
+  <AccordionPrimitive.Content
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down w-full overflow-hidden text-sm transition-all"
+    ref={ref}
+    {...props}
+  >
+    <div className={cn('pt-0 pb-4', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+);
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };