@hanzo/ui 4.5.0 → 4.5.2

package/primitives/dialog.tsx

@@ -17,7 +17,7 @@ const DialogPortal = React.forwardRef<
     DialogPortalProps
 >(({ className, children, ...props }, ref) => (
     <DialogPrimitive.Portal {...props}>
-        <div className={cn("fixed inset-0 z-modal flex items-end justify-center sm:items-center", className)}>
+        <div className={cn("fixed inset-0 z-50 flex items-end justify-center sm:items-center", className)}>
             {children}
         </div>
     </DialogPrimitive.Portal>
@@ -32,9 +32,14 @@ const DialogOverlay = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Overlay>,
     DialogOverlayProps
 >(({ className, ...props }, ref) => (
-    <div className={cn("bg-overlay  backdrop-blur-sm fixed inset-0 z-below-modal flex items-end justify-center sm:items-center", className)}>
-      <DialogPrimitive.Overlay ref={ref} {...props} />
-    </div>
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", 
+            className
+        )}
+        {...props}
+    />
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
@@ -50,7 +55,7 @@ const DialogClose = React.forwardRef<
     <DialogPrimitive.Close
         ref={ref}
         className={cn(
-            "absolute right-4 top-3 p-1 justify-self-start hover:brightness-105 hover:scale-110 duration-100 ring-1 ring-muted transition hover:text- focus:outline-none rounded-full items-center",
+            "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
             className
         )}
         {...props}
@@ -71,7 +76,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitive.Content
             ref={ref}
             className={cn(
-                "fixed z-50 grid w-full gap-4 rounded-t-lg bg-level-1 p-4 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-sm sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+                "fixed z-50 grid w-full gap-4 rounded-t-lg bg-level-1 p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
                 className
             )}
             {...props}
@@ -132,7 +137,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <DialogPrimitive.Description
         ref={ref}
-        className={cn("text-sm text-muted", className)}
+        className={cn("text-sm text-muted-1", className)}
         {...props}
     />
 ))

package/primitives/tabs.tsx

@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-foreground',
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
       className
     )}
     {...props}

package/primitives/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-floating overflow-hidden rounded-sm border bg-level-1 px-2 py-1.5 text-sm text-muted shadow-md 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',
+      'z-50 overflow-hidden rounded-md border bg-level-1 px-3 py-1.5 text-sm text-muted-foreground shadow-md animate-in fade-in-50 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',
       className
     )}
     {...props}

package/public/r/accordion.json

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

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

package/public/r/dialog.json

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

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

package/public/r/popover.json

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

@@ -0,0 +1,11 @@
+{
+  "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

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

package/registry/api.ts

@@ -0,0 +1,164 @@
+import { registryItemSchema, RegistryItem, Registry } from "."
+import { z } from "zod"
+
+const registryCache = new Map<string, Promise<any>>()
+
+/**
+ * Gets the full registry URL based on the registry name or URL provided
+ * @param registry - Registry name, URL, or file path
+ * @returns The complete registry URL
+ */
+export function getRegistryUrl(registry: string): string {
+  // Check if registry is a full URL
+  if (registry.startsWith("http")) {
+    return registry
+  }
+
+  // Default to Hanzo registry if REGISTRY_BASE_URL is defined, otherwise use shadcn
+  const baseUrl = process.env.REGISTRY_BASE_URL || "https://ui.shadcn.com/registry"
+  
+  // Check if registry is a path to a JSON file
+  if (registry.endsWith(".json")) {
+    return `${baseUrl}/${registry}`
+  }
+
+  // Assume registry is a registry style
+  return `${baseUrl}/${registry}/registry.json`
+}
+
+/**
+ * Fetches a specific registry item by URL
+ * @param itemUrl - The URL of the item to fetch
+ * @param basePath - Base path for resolving imports
+ * @returns The registry item or null if not found
+ */
+export async function getRegistryItem(
+  itemUrl: string,
+  basePath: string
+): Promise<RegistryItem | null> {
+  try {
+    const response = await fetch(itemUrl)
+
+    if (!response.ok) {
+      console.error(`Failed to fetch registry item from ${itemUrl}: ${response.status} ${response.statusText}`)
+      return null
+    }
+
+    const item = await response.json()
+    const validatedItem = registryItemSchema.safeParse(item)
+    
+    if (!validatedItem.success) {
+      console.error(`Invalid registry item format: ${JSON.stringify(validatedItem.error)}`)
+      return null
+    }
+
+    // Process and resolve file paths
+    if (validatedItem.data.files) {
+      for (const file of validatedItem.data.files) {
+        if (!file.content) {
+          continue
+        }
+
+        // If the file has a target, we resolve it from the target
+        if (file.target) {
+          file.target = resolveImport(file.target, basePath)
+        }
+      }
+    }
+
+    return validatedItem.data
+  } catch (error) {
+    console.error(`Error fetching registry item: ${error}`)
+    return null
+  }
+}
+
+/**
+ * Resolves an import path relative to a base path
+ * @param importPath - The import path to resolve
+ * @param basePath - The base path to resolve against
+ * @returns The resolved import path
+ */
+export function resolveImport(importPath: string, basePath: string): string {
+  const importParts = importPath?.split("/")
+
+  // Check if it's a relative import
+  if (importPath.startsWith(".")) {
+    return [basePath.replace(/^@/, ""), ...importParts].filter(Boolean).join("/")
+  }
+
+  // Check if it's a scope package
+  if (importParts?.[0]?.startsWith("@")) {
+    return importPath
+  }
+
+  return importPath
+}
+
+/**
+ * Fetches registry data from one or more paths
+ * @param paths - Array of registry paths to fetch
+ * @param options - Options for fetching the registry
+ * @returns Array of registry data
+ */
+export async function fetchRegistry(
+  paths: string[],
+  options: { useCache?: boolean } = {}
+): Promise<Registry[]> {
+  options = {
+    useCache: true,
+    ...options,
+  }
+
+  try {
+    const results = await Promise.all(
+      paths.map(async (path) => {
+        const url = getRegistryUrl(path)
+
+        // Check cache first if caching is enabled
+        if (options.useCache && registryCache.has(url)) {
+          return registryCache.get(url)
+        }
+
+        // Store the promise in the cache before awaiting if caching is enabled
+        const fetchPromise = (async () => {
+          const response = await fetch(url)
+
+          if (!response.ok) {
+            throw new Error(
+              `Failed to fetch registry from ${url}. ${response.status} ${response.statusText}`
+            )
+          }
+
+          return response.json()
+        })()
+
+        if (options.useCache) {
+          registryCache.set(url, fetchPromise)
+        }
+        return fetchPromise
+      })
+    )
+
+    return results
+  } catch (error) {
+    console.error(`Error fetching registry: ${error}`)
+    throw error
+  }
+}
+
+/**
+ * Gets the URL for a specific registry item
+ * @param itemName - The name of the registry item
+ * @param registryUrl - The base registry URL
+ * @returns The URL for the specific registry item
+ */
+export function getRegistryItemUrl(itemName: string, registryUrl: string): string {
+  const registryBaseUrl = registryUrl.replace(/\/registry\.json$/, "")
+  return `${registryBaseUrl}/r/${itemName}.json`
+}
+
+// Support CommonJS
+if (typeof module !== 'undefined') {
+  module.exports = { getRegistryUrl, getRegistryItem, resolveImport, fetchRegistry, getRegistryItemUrl }
+}

package/registry/index.ts

@@ -0,0 +1,60 @@
+import { z } from "zod"
+
+// Define the file schema to match shadcn/ui's format
+export const fileSchema = z.object({
+  path: z.string(),
+  content: z.string().optional(),
+  type: z.string(),
+  target: z.string().optional(),
+})
+
+// Registry item schema aligned with shadcn/ui format
+export const registryItemSchema = z.object({
+  name: z.string(),
+  type: z.string(),
+  description: z.string().optional(),
+  author: z.string().optional(),
+  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
+  registryDependencies: z.array(z.string()).optional(),
+  files: z.array(fileSchema).optional(),
+  meta: z.record(z.any()).optional(),
+  title: z.string().optional(),
+  cssVars: z.record(z.any()).optional(),
+  tailwind: z.record(z.any()).optional(),
+  category: z.string().optional(),
+  subcategory: z.string().optional(),
+})
+
+// Registry schema aligned with shadcn/ui format
+export const registrySchema = z.object({
+  $schema: z.string().optional(),
+  name: z.string(),
+  homepage: z.string().optional(),
+  style: z.string().optional(),
+  items: z.array(registryItemSchema),
+})
+
+// Schema for a registry with full content
+export const registryWithContentSchema = registrySchema.extend({
+  items: z.array(
+    registryItemSchema.extend({
+      files: z.array(
+        fileSchema.extend({
+          content: z.string(),
+        })
+      ),
+    })
+  ),
+})
+
+// Type definitions for easier use in TypeScript
+export type RegistryItem = z.infer<typeof registryItemSchema>
+export type Registry = z.infer<typeof registrySchema>
+export type RegistryWithContent = z.infer<typeof registryWithContentSchema>
+export type RegistryFile = z.infer<typeof fileSchema>
+
+// Support CommonJS
+if (typeof module !== 'undefined') {
+  module.exports = { fileSchema, registryItemSchema, registrySchema, registryWithContentSchema }
+}

package/registry/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@hanzo/ui-registry",
+  "private": true,
+  "type": "module",
+  "main": "../dist/registry/index.js",
+  "types": "../dist/registry/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  }
+}