@hanzo/ui 4.6.0 → 4.7.0

package/primitives/toggle-group.tsx

@@ -1,63 +0,0 @@
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '../src/utils';
-import { toggleVariants } from './toggle';
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: 'default',
-  variant: 'default',
-});
-
-const ToggleGroup = ({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants>) => (
-  <ToggleGroupPrimitive.Root
-    className={cn('flex items-center justify-center gap-1', className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-);
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = ({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof toggleVariants>) => {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-};
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };

package/primitives/toggle.tsx

@@ -1,44 +0,0 @@
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '../src/utils';
-
-const toggleVariants = cva(
-  'ring-offset-background hover:bg-muted hover:text-text-secondary focus-visible:ring-ring data-[state=on]:bg-bg-quaternary inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-white',
-  {
-    variants: {
-      variant: {
-        default: 'bg-bg-tertiary',
-        outline:
-          'border-divider hover:bg-bg-tertiary border bg-transparent hover:text-white',
-      },
-      size: {
-        default: 'h-10 px-3',
-        sm: 'h-9 px-2.5',
-        lg: 'h-11 px-5',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-const Toggle = ({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) => (
-  <TogglePrimitive.Root
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-);
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };

package/primitives/tooltip.tsx

@@ -1,47 +0,0 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-
-import { cn } from '../src/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipPortal = TooltipPrimitive.Portal;
-const TooltipArrow = TooltipPrimitive.TooltipArrow;
-
-const TooltipContent = ({
-  className,
-  sideOffset = 4,
-  showArrow = true,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
-  showArrow?: boolean;
-}) => (
-  <TooltipPrimitive.Content
-    className={cn(
-      'border-divider bg-bg-dark animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-w-[280px] rounded-lg border px-3 py-1.5 text-xs text-white',
-      className,
-    )}
-    sideOffset={sideOffset}
-    {...props}
-  >
-    {props.children}
-
-    {showArrow && (
-      <TooltipPrimitive.Arrow className="fill-bg-dark -my-px drop-shadow-[0_1px_0_#313336]" />
-    )}
-  </TooltipPrimitive.Content>
-);
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-  TooltipPortal,
-  TooltipArrow,
-};

package/primitives/video-player.tsx

@@ -1,23 +0,0 @@
-'use client'
-import React from 'react'
-
-interface VideoProps extends React.ComponentPropsWithoutRef<"video"> {
-  sources: string[]
-}
-
-const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoProps>(
-({
-  sources, 
-  ...rest
-}, ref) => {
-  
-  return (
-    <video ref={ref} {...rest} >
-    {sources.map((source, index) => (  
-      <source key={index} src={source} />
-    ))} 
-    </video>
-  )
-})
-
-export default VideoPlayer

package/public/r/accordion.json

@@ -1,11 +0,0 @@
-{
-  "name": "accordion",
-  "type": "registry:component",
-  "description": "A accordion component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/accordion/accordion.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/alert.json

@@ -1,11 +0,0 @@
-{
-  "name": "alert",
-  "type": "registry:component",
-  "description": "A alert component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/alert/alert.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/avatar.json

@@ -1,11 +0,0 @@
-{
-  "name": "avatar",
-  "type": "registry:component",
-  "description": "A avatar component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/avatar/avatar.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/badge.json

@@ -1,11 +0,0 @@
-{
-  "name": "badge",
-  "type": "registry:component",
-  "description": "A badge component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/badge/badge.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/button.json

@@ -1,11 +0,0 @@
-{
-  "name": "button",
-  "type": "registry:component",
-  "description": "A button component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/button/button.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/card.json

@@ -1,11 +0,0 @@
-{
-  "name": "card",
-  "type": "registry:component",
-  "description": "A card component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/card/card.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/checkbox.json

@@ -1,11 +0,0 @@
-{
-  "name": "checkbox",
-  "type": "registry:component",
-  "description": "A checkbox component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/checkbox/checkbox.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/default.json

@@ -1,6 +0,0 @@
-{
-  "name": "default",
-  "type": "registry:style",
-  "description": "The default style for Hanzo UI components.",
-  "files": []
-}

package/public/r/dialog.json

@@ -1,11 +0,0 @@
-{
-  "name": "dialog",
-  "type": "registry:component",
-  "description": "A dialog component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/dialog/dialog.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/input.json

@@ -1,11 +0,0 @@
-{
-  "name": "input",
-  "type": "registry:component",
-  "description": "A input component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/input/input.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/label.json

@@ -1,11 +0,0 @@
-{
-  "name": "label",
-  "type": "registry:component",
-  "description": "A label component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/label/label.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/new-york.json

@@ -1,6 +0,0 @@
-{
-  "name": "new-york",
-  "type": "registry:style",
-  "description": "The new-york style for Hanzo UI components.",
-  "files": []
-}

package/public/r/popover.json

@@ -1,11 +0,0 @@
-{
-  "name": "popover",
-  "type": "registry:component",
-  "description": "A popover component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/popover/popover.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/select.json

@@ -1,11 +0,0 @@
-{
-  "name": "select",
-  "type": "registry:component",
-  "description": "A select component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/select/select.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/table.json

@@ -1,11 +0,0 @@
-{
-  "name": "table",
-  "type": "registry:component",
-  "description": "A table component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/table/table.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/tabs.json

@@ -1,11 +0,0 @@
-{
-  "name": "tabs",
-  "type": "registry:component",
-  "description": "A tabs component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/tabs/tabs.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/public/r/toast.json

@@ -1,11 +0,0 @@
-{
-  "name": "toast",
-  "type": "registry:component",
-  "description": "A toast component for your UI.",
-  "files": [
-    {
-      "path": "default/ui/toast/toast.tsx",
-      "type": "registry:component"
-    }
-  ]
-}

package/registry.json

@@ -1,184 +0,0 @@
-{
-  "$schema": "https://ui.hanzo.com/schema/registry.json",
-  "name": "hanzo",
-  "homepage": "https://ui.hanzo.ai",
-  "items": [
-    {
-      "name": "default",
-      "type": "registry:style",
-      "description": "The default style for Hanzo UI components.",
-      "files": []
-    },
-    {
-      "name": "new-york",
-      "type": "registry:style",
-      "description": "The new-york style for Hanzo UI components.",
-      "files": []
-    },
-    {
-      "name": "accordion",
-      "type": "registry:component",
-      "description": "A accordion component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/accordion/accordion.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "alert",
-      "type": "registry:component",
-      "description": "A alert component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/alert/alert.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "avatar",
-      "type": "registry:component",
-      "description": "A avatar component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/avatar/avatar.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "badge",
-      "type": "registry:component",
-      "description": "A badge component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/badge/badge.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "button",
-      "type": "registry:component",
-      "description": "A button component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/button/button.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "card",
-      "type": "registry:component",
-      "description": "A card component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/card/card.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "checkbox",
-      "type": "registry:component",
-      "description": "A checkbox component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/checkbox/checkbox.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "dialog",
-      "type": "registry:component",
-      "description": "A dialog component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/dialog/dialog.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "input",
-      "type": "registry:component",
-      "description": "A input component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/input/input.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "label",
-      "type": "registry:component",
-      "description": "A label component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/label/label.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "popover",
-      "type": "registry:component",
-      "description": "A popover component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/popover/popover.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "select",
-      "type": "registry:component",
-      "description": "A select component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/select/select.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "table",
-      "type": "registry:component",
-      "description": "A table component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/table/table.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "tabs",
-      "type": "registry:component",
-      "description": "A tabs component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/tabs/tabs.tsx",
-          "type": "registry:component"
-        }
-      ]
-    },
-    {
-      "name": "toast",
-      "type": "registry:component",
-      "description": "A toast component for your UI.",
-      "files": [
-        {
-          "path": "default/ui/toast/toast.tsx",
-          "type": "registry:component"
-        }
-      ]
-    }
-  ]
-}

package/src/button.ts

@@ -1 +0,0 @@
-export * from '../../../app/registry/new-york/ui/button'

package/src/hooks/index.ts

@@ -1,7 +0,0 @@
-export * from './use-debounce';
-export * from './use-map';
-export * from './use-measure';
-export * from './use-click-away';
-export * from './use-copy-clipboard';
-export * from './use-reverse-video-playback';
-export * from './use-scroll-restoration';

package/src/hooks/use-click-away.ts

@@ -1,31 +0,0 @@
-import React from 'react';
-
-export function useClickAway<T extends Element>(
-  cb: (e: Event) => void,
-): React.RefObject<T | null> {
-  const ref = React.useRef<T | null>(null);
-  const refCb = React.useRef(cb);
-
-  React.useLayoutEffect(() => {
-    refCb.current = cb;
-  });
-
-  React.useEffect(() => {
-    const handler = (e: Event) => {
-      const element = ref.current;
-      if (element && !element.contains(e.target as Node)) {
-        refCb.current(e);
-      }
-    };
-
-    document.addEventListener('mousedown', handler);
-    document.addEventListener('touchstart', handler);
-
-    return () => {
-      document.removeEventListener('mousedown', handler);
-      document.removeEventListener('touchstart', handler);
-    };
-  }, []);
-
-  return ref;
-}

package/src/hooks/use-combined-refs.ts

@@ -1,22 +0,0 @@
-import type React from 'react';
-import { useEffect, useRef } from 'react';
-
-function useCombinedRefs<T>(
-  ...refs: React.ForwardedRef<T>[]
-): React.RefObject<T | null> {
-  const targetRef = useRef<T>(null);
-  useEffect(() => {
-    refs.forEach((ref) => {
-      if (!ref) return;
-
-      if (typeof ref === 'function') {
-        ref(targetRef.current);
-      } else {
-        ref.current = targetRef.current;
-      }
-    });
-  }, [refs]);
-  return targetRef;
-}
-
-export { useCombinedRefs };

package/src/hooks/use-copy-clipboard.ts

@@ -1,30 +0,0 @@
-import { useState } from 'react';
-import { copyToClipboard } from '../helpers';
-
-type UseCopyClipboardProps = {
-  string?: string;
-  onCopyClipboard?: () => void;
-};
-
-export const useCopyClipboard = ({
-  string,
-  onCopyClipboard,
-}: UseCopyClipboardProps) => {
-  const [isCopied, setIsCopied] = useState(false);
-
-  let timeout: ReturnType<typeof setTimeout>;
-  const onCopy = async () => {
-    if (!string) return;
-    const string_ = string.trim();
-    if (onCopyClipboard && typeof onCopyClipboard === 'function') {
-      onCopyClipboard();
-    } else {
-      await copyToClipboard(string_);
-    }
-    setIsCopied(true);
-    clearTimeout(timeout);
-    timeout = setTimeout(() => setIsCopied(false), 1000);
-  };
-
-  return { isCopied, onCopy };
-};