@hanzo/ui 4.7.0 → 4.8.3

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,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.7.0",
+  "version": "4.8.3",
   "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/",
@@ -17,6 +17,16 @@
     "dist",
     "style",
     "bin",
+    "primitives",
+    "blocks",
+    "components",
+    "assets",
+    "frameworks",
+    "helpers",
+    "types",
+    "util",
+    "src",
+    "tailwind",
     "README.md",
     "LICENSE"
   ],
@@ -69,14 +79,14 @@
       "require": "./dist/index.js"
     },
     "./assets": {
-      "types": "./dist/assets/index.d.ts",
-      "import": "./dist/assets/index.mjs",
-      "require": "./dist/assets/index.js"
+      "types": "./assets/index.ts",
+      "import": "./assets/index.ts",
+      "require": "./assets/index.ts"
     },
-    "./assets/*": {
-      "types": "./dist/assets/*.d.ts",
-      "import": "./dist/assets/*.mjs",
-      "require": "./dist/assets/*.js"
+    "./helpers": {
+      "types": "./helpers/index.ts",
+      "import": "./helpers/index.ts",
+      "require": "./helpers/index.ts"
     },
     "./blocks": {
       "types": "./dist/blocks/index.d.ts",
@@ -118,6 +128,12 @@
       "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/index.d.ts",
@@ -129,6 +145,11 @@
       "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",
@@ -149,6 +170,11 @@
       "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",
@@ -169,6 +195,11 @@
       "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",
@@ -224,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",

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 };

package/primitives/action-button.tsx

@@ -0,0 +1,42 @@
+'use client'
+import React from 'react'
+
+import { cn, type VariantProps } from '../util'
+
+import type { ButtonDef, ButtonModalDef } from '../types'
+import type { buttonVariants } from './button'
+import DVC from './dialog-video-controller'
+
+const ActionButton: React.FC<
+  VariantProps<typeof buttonVariants> &
+  {
+    def: ButtonDef
+    className?: string
+  }
+> = ({
+  def,
+  className='',
+  ...rest
+}) => {
+  if (def.action.type === 'modal') {
+    const m = def.action.def as ButtonModalDef
+    const Modal = m.Comp
+    return (
+      <DVC>
+        <Modal 
+          title={m.title}
+          byline={m.byline}
+          buttonText={def.text}
+          buttonProps={{...def.props, ...rest, className: cn((def.props?.className ?? ''), className)}}
+          action={m.action}
+          actionEnclosure={m.actionEnclosure}
+          {...m.props}
+        />
+      </DVC>
+    )
+  }
+    // no other types supported yet
+  return <></>
+}
+
+export default ActionButton

package/primitives/alert-dialog.tsx

@@ -0,0 +1,185 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import React from 'react';
+
+import { cn } from '../src/utils';
+import { buttonVariants } from './button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Overlay
+> & {
+  ref?: React.RefObject<
+    React.ComponentRef<typeof AlertDialogPrimitive.Overlay>
+  >;
+};
+
+const AlertDialogOverlay = ({
+  className,
+  children,
+  ref,
+  ...props
+}: AlertDialogOverlayProps) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm',
+      'bg-bg-dark/90',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+);
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+type AlertDialogContentProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Content
+> & {
+  ref?: React.RefObject<
+    React.ComponentRef<typeof AlertDialogPrimitive.Content>
+  >;
+};
+
+const AlertDialogContent = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogContentProps) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      className={cn(
+        'bg-bg-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 border-divider fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  </AlertDialogPortal>
+);
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex', className)} {...props} />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+type AlertDialogTitleProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Title
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AlertDialogPrimitive.Title>>;
+};
+
+const AlertDialogTitle = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogTitleProps) => (
+  <AlertDialogPrimitive.Title
+    className={cn('text-lg font-semibold', className)}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Description
+> & {
+  ref?: React.RefObject<
+    React.ComponentRef<typeof AlertDialogPrimitive.Description>
+  >;
+};
+
+const AlertDialogDescription = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogDescriptionProps) => (
+  <AlertDialogPrimitive.Description
+    className={cn('text-text-secondary text-sm', className)}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+type AlertDialogActionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Action
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AlertDialogPrimitive.Action>>;
+};
+
+const AlertDialogAction = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogActionProps) => (
+  <AlertDialogPrimitive.Action
+    className={cn(
+      buttonVariants({ variant: 'default', size: 'sm' }),
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+type AlertDialogCancelProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Cancel
+> & {
+  ref?: React.RefObject<React.ComponentRef<typeof AlertDialogPrimitive.Cancel>>;
+};
+
+const AlertDialogCancel = ({
+  className,
+  ref,
+  ...props
+}: AlertDialogCancelProps) => (
+  <AlertDialogPrimitive.Cancel
+    className={cn(
+      buttonVariants({ variant: 'outline', size: 'sm' }),
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/primitives/alert.tsx

@@ -0,0 +1,74 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const alertVariants = cva(
+  '[&>svg]:text-text-default relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-bg-tertiary text-text-default',
+        info: 'text-text-secondary [&>svg]:text-text-secondary bg-gray-250 border-gray-100 border-gray-200',
+        destructive:
+          'border-[#4d0408] bg-[#2d0607] text-[#ff9ea1] [&>svg]:text-[#ff9ea1]',
+        warning:
+          'border-yellow-800 bg-yellow-900 text-yellow-400 [&>svg]:text-yellow-400',
+        success:
+          'border-green-800 bg-green-900 text-green-400 [&>svg]:text-green-400',
+        download:
+          'border-gray-800 bg-gray-900 text-cyan-400 [&>svg]:text-cyan-400',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+type AlertProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof alertVariants> & {
+    ref?: React.RefObject<HTMLDivElement>;
+  };
+
+const Alert = ({ className, variant, ref, ...props }: AlertProps) => (
+  <div
+    className={cn(alertVariants({ variant }), className)}
+    ref={ref}
+    role="alert"
+    {...props}
+  />
+);
+Alert.displayName = 'Alert';
+
+type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+  ref?: React.RefObject<HTMLParagraphElement>;
+};
+
+const AlertTitle = ({ className, ref, ...props }: AlertTitleProps) => (
+  <h5
+    className={cn('mb-1 leading-none font-medium tracking-tight', className)}
+    ref={ref}
+    {...props}
+  />
+);
+AlertTitle.displayName = 'AlertTitle';
+
+type AlertDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement>;
+};
+
+const AlertDescription = ({
+  className,
+  ref,
+  ...props
+}: AlertDescriptionProps) => (
+  <div
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    ref={ref}
+    {...props}
+  />
+);
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };

package/primitives/apply-typography.tsx

@@ -0,0 +1,55 @@
+import React, { PropsWithChildren } from 'react'
+
+import { cn } from '../util'
+
+type TypographySize = 'responsive' | 'sm' | 'base' | 'lg' | 'xl' // if t-shirt size, do *not* be responsive
+
+const ApplyTypography: React.FC<
+  React.ComponentProps<'div'> & {
+    asTag?: 'div' | 'section' | 'nav' | 'main' | 'article',
+    size?: TypographySize
+  }
+> = ({ 
+  children,
+  className='',
+  asTag='div',
+  size='responsive',
+  ...rest
+}) => {
+
+    // responsive version by default
+  let typoClasses = 
+    'typography gap-3 ' +
+    'xs:typography-sm ' + 
+    'sm:typography sm:gap-4 ' +
+    'lg:typography-lg lg:gap-5 ' + 
+    'xl:typography-xl xl:gap-6 ' + 
+    'typography-headings:font-heading ' // only effects h1-h3 (in plugin)
+
+  switch (size) {
+    case 'sm': {
+      typoClasses = 'typography typography-sm gap-3 typography-headings:font-heading typography-p:text-sm '
+    } break
+    case 'base': {
+      typoClasses = 'typography gap-4 typography-headings:font-heading '
+    } break
+    case 'lg': {
+      typoClasses = 'typography typography-lg gap-5 typography-headings:font-heading typography-p:text-lg '
+    } break
+    case 'xl': {
+      typoClasses = 'typography typography-xl gap-6 typography-headings:font-heading typography-p:text-lg '
+    } break
+  }
+  
+  const Tag = asTag
+  return (
+    <Tag {...rest} className={cn(typoClasses, className)}>
+      {children}
+    </Tag>
+  )
+}
+
+export {
+  type TypographySize,
+  ApplyTypography as default
+}

package/primitives/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+"use client"
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+const AspectRatio = AspectRatioPrimitive.Root
+
+export default AspectRatio