@hanzo/ui 5.0.2 → 5.1.0

package/frameworks/vue/index.ts

@@ -1,9 +0,0 @@
-// 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

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

package/helpers/file.ts

@@ -1,33 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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/primitives/accordion.tsx

@@ -1,74 +0,0 @@
-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

@@ -1,42 +0,0 @@
-'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

@@ -1,185 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

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

package/primitives/avatar.tsx

@@ -1,57 +0,0 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import React from 'react';
-
-import { cn } from '../src/utils';
-
-type AvatarProps = React.ComponentPropsWithoutRef<
-  typeof AvatarPrimitive.Root
-> & {
-  ref?: React.RefObject<React.ComponentRef<typeof AvatarPrimitive.Root>>;
-};
-
-const Avatar = ({ className, ref, ...props }: AvatarProps) => (
-  <AvatarPrimitive.Root
-    className={cn(
-      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-);
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-type AvatarImageProps = React.ComponentPropsWithoutRef<
-  typeof AvatarPrimitive.Image
-> & {
-  ref?: React.RefObject<React.ComponentRef<typeof AvatarPrimitive.Image>>;
-};
-
-const AvatarImage = ({ className, ref, ...props }: AvatarImageProps) => (
-  <AvatarPrimitive.Image
-    className={cn('aspect-square h-full w-full', className)}
-    ref={ref}
-    {...props}
-  />
-);
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-type AvatarFallbackProps = React.ComponentPropsWithoutRef<
-  typeof AvatarPrimitive.Fallback
-> & {
-  ref?: React.RefObject<React.ComponentRef<typeof AvatarPrimitive.Fallback>>;
-};
-
-const AvatarFallback = ({ className, ref, ...props }: AvatarFallbackProps) => (
-  <AvatarPrimitive.Fallback
-    className={cn(
-      'bg-muted flex h-full w-full items-center justify-center rounded-full',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-);
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };