@hanzo/ui 4.5.0 → 4.5.3

package/dist/mcp/index.d.ts

@@ -0,0 +1,28 @@
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+/**
+ * MCP Server implementation for @hanzo/ui registry
+ * Provides tools for interacting with the registry
+ */
+export declare const server: Server<{
+    method: string;
+    params?: {
+        [x: string]: unknown;
+        _meta?: {
+            [x: string]: unknown;
+            progressToken?: string | number | undefined;
+        } | undefined;
+    } | undefined;
+}, {
+    method: string;
+    params?: {
+        [x: string]: unknown;
+        _meta?: {
+            [x: string]: unknown;
+        } | undefined;
+    } | undefined;
+}, {
+    [x: string]: unknown;
+    _meta?: {
+        [x: string]: unknown;
+    } | undefined;
+}>;

package/dist/mcp/index.js

@@ -0,0 +1,436 @@
+import { registrySchema, Registry, RegistryItem } from "../registry";
+import { fetchRegistry, getRegistryItem, getRegistryItemUrl } from "../registry/api";
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
+import { z } from "zod";
+import { zodToJsonSchema } from "zod-to-json-schema";
+// Get package version
+let packageVersion = "4.5.0";
+try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const packageJson = require("../../package.json");
+    packageVersion = packageJson.version || packageVersion;
+}
+catch (error) {
+    console.error("Could not load package.json for version", error);
+}
+/**
+ * MCP Server implementation for @hanzo/ui registry
+ * Provides tools for interacting with the registry
+ */
+export const server = new Server({
+    name: "hanzo-ui",
+    version: packageVersion,
+}, {
+    capabilities: {
+        resources: {},
+        tools: {},
+    },
+});
+// Register the available tools
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+    return {
+        tools: [
+            {
+                name: "init",
+                description: "Initialize a new project using @hanzo/ui components and styles.",
+                inputSchema: zodToJsonSchema(z.object({
+                    style: z.string().optional().describe("The style to use for the project (e.g., 'default' or 'new-york')"),
+                })),
+            },
+            {
+                name: "list_components",
+                description: "List all available components in the registry",
+                inputSchema: zodToJsonSchema(z.object({
+                    type: z.string().optional().describe("Filter components by type (e.g., 'ui', 'block')"),
+                    category: z.string().optional().describe("Filter components by category"),
+                })),
+            },
+            {
+                name: "get_component",
+                description: "Get detailed information about a specific component",
+                inputSchema: zodToJsonSchema(z.object({
+                    name: z
+                        .string()
+                        .describe("The name of the component to get from the registry"),
+                })),
+            },
+            {
+                name: "add_component",
+                description: "Get instructions for adding a component to a project",
+                inputSchema: zodToJsonSchema(z.object({
+                    name: z
+                        .string()
+                        .describe("The name of the component to add"),
+                    style: z
+                        .string()
+                        .optional()
+                        .describe("The style to use (default, new-york, etc.)"),
+                })),
+            },
+            {
+                name: "list_styles",
+                description: "List all available styles in the registry",
+                inputSchema: zodToJsonSchema(z.object({})),
+            },
+            {
+                name: "search_registry",
+                description: "Search the registry for components matching criteria",
+                inputSchema: zodToJsonSchema(z.object({
+                    query: z
+                        .string()
+                        .describe("Search term to look for in component names and descriptions"),
+                })),
+            },
+        ],
+    };
+});
+// Handle tool calls
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    try {
+        // Ensure we have arguments
+        const args = request.params.arguments || {};
+        // Get registry URL from environment variable or use default
+        const REGISTRY_URL = process.env.REGISTRY_URL || "https://ui.hanzo.ai/registry/registry.json";
+        const registry = await getRegistry(REGISTRY_URL);
+        switch (request.params.name) {
+            case "init": {
+                const style = args.style || "default";
+                let text = `# Initialize a new project with @hanzo/ui
+
+To create a new project with @hanzo/ui components, follow these steps:
+
+1. Create a new project first:
+\`\`\`bash
+# Using npm
+npm create next-app@latest my-app
+
+# Or using yarn
+yarn create next-app my-app
+
+# Or using pnpm
+pnpm create next-app my-app
+\`\`\`
+
+2. Navigate to your project directory:
+\`\`\`bash
+cd my-app
+\`\`\`
+
+3. Install @hanzo/ui and initialize it:
+\`\`\`bash
+npx @hanzo/ui@latest init${style ? ` --style=${style}` : ""}
+\`\`\`
+
+This will:
+- Install all necessary dependencies
+- Set up the project structure for @hanzo/ui
+- Configure tailwind.css with the appropriate theme
+- Add component configuration
+`;
+                // Check if the registry has any additional setup instructions
+                const setupConfig = registry.items.find((item) => item.type === "registry:config" && item.name === "setup");
+                if (setupConfig) {
+                    text += `
+## Additional Setup
+
+${setupConfig.description || "Follow any additional setup instructions provided during initialization."}
+`;
+                }
+                return {
+                    content: [
+                        { type: "text", text }
+                    ],
+                };
+            }
+            case "list_components": {
+                // Filter components based on type and category if provided
+                const typeFilter = args.type ? `ui:${args.type}` : null;
+                const categoryFilter = args.category || null;
+                let components = registry.items.filter(item => {
+                    // Filter by type if specified
+                    if (typeFilter && !item.type.includes(typeFilter)) {
+                        return false;
+                    }
+                    // Filter by category if specified
+                    if (categoryFilter && item.category !== categoryFilter) {
+                        return false;
+                    }
+                    return true;
+                });
+                // Group components by category if they have categories
+                const hasCategories = components.some(item => item.category);
+                let responseText = "# Available Components\n\n";
+                if (hasCategories) {
+                    // Group by category
+                    const categorized = components.reduce((acc, item) => {
+                        const category = item.category || "Uncategorized";
+                        if (!acc[category]) {
+                            acc[category] = [];
+                        }
+                        acc[category].push(item);
+                        return acc;
+                    }, {});
+                    // Build response
+                    for (const [category, items] of Object.entries(categorized)) {
+                        responseText += `## ${category}\n\n`;
+                        items.forEach(item => {
+                            responseText += `- **${item.name}** - ${item.description || 'No description available'}\n`;
+                        });
+                        responseText += "\n";
+                    }
+                }
+                else {
+                    // Simple list
+                    components.forEach(item => {
+                        responseText += `- **${item.name}** (${item.type}) - ${item.description || 'No description available'}\n`;
+                    });
+                }
+                responseText += "\nTo get detailed information about a specific component, use the `get_component` tool.\n";
+                responseText += "To add a component to your project, use the `add_component` tool.\n";
+                return {
+                    content: [{ type: "text", text: responseText }],
+                };
+            }
+            case "get_component": {
+                const name = z.string().parse(args.name);
+                if (!name) {
+                    throw new Error("Component name is required");
+                }
+                const itemUrl = getRegistryItemUrl(name, REGISTRY_URL);
+                const component = await getRegistryItem(itemUrl, "");
+                if (!component) {
+                    return {
+                        content: [
+                            {
+                                type: "text",
+                                text: `Component '${name}' not found in the registry.`,
+                            },
+                        ],
+                    };
+                }
+                // Build a markdown description of the component
+                let componentDetails = `# ${component.name}\n\n`;
+                if (component.description) {
+                    componentDetails += `${component.description}\n\n`;
+                }
+                componentDetails += `**Type:** ${component.type}\n`;
+                if (component.category) {
+                    componentDetails += `**Category:** ${component.category}\n`;
+                }
+                // Dependencies
+                if (component.dependencies && component.dependencies.length > 0) {
+                    componentDetails += `\n## Dependencies\n\n`;
+                    component.dependencies.forEach(dep => {
+                        componentDetails += `- ${dep}\n`;
+                    });
+                }
+                // Registry Dependencies
+                if (component.registryDependencies && component.registryDependencies.length > 0) {
+                    componentDetails += `\n## Required Components\n\n`;
+                    componentDetails += `This component requires the following components that will be installed automatically:\n\n`;
+                    component.registryDependencies.forEach(dep => {
+                        componentDetails += `- ${dep}\n`;
+                    });
+                }
+                // Files
+                if (component.files && component.files.length > 0) {
+                    componentDetails += `\n## Files\n\n`;
+                    component.files.forEach(file => {
+                        componentDetails += `- ${file.path} (${file.type})\n`;
+                    });
+                }
+                // Show example usage if available
+                const exampleFile = component.files?.find(file => file.type === "registry:example");
+                if (exampleFile && exampleFile.content) {
+                    componentDetails += `\n## Example Usage\n\n\`\`\`tsx\n${exampleFile.content}\n\`\`\`\n`;
+                }
+                // Add installation instructions
+                componentDetails += `\n## Installation\n\n`;
+                componentDetails += `Run the following command to add this component to your project:\n\n`;
+                componentDetails += `\`\`\`bash\n`;
+                componentDetails += `npx @hanzo/ui@latest add ${name}\n`;
+                componentDetails += `\`\`\`\n`;
+                return {
+                    content: [{ type: "text", text: componentDetails }],
+                };
+            }
+            case "add_component": {
+                const name = z.string().parse(args.name);
+                const style = args.style || "default";
+                if (!name) {
+                    throw new Error("Component name is required");
+                }
+                const itemUrl = getRegistryItemUrl(name, REGISTRY_URL);
+                const component = await getRegistryItem(itemUrl, "");
+                if (!component) {
+                    return {
+                        content: [
+                            {
+                                type: "text",
+                                text: `Component '${name}' not found in the registry.`,
+                            },
+                        ],
+                    };
+                }
+                // Check if the component has dependencies
+                const hasDeps = component.registryDependencies && component.registryDependencies.length > 0;
+                let instructions = `# Adding the ${name} Component\n\n`;
+                // Main installation command
+                instructions += `Run the following command to add the \`${name}\` component to your project:\n\n`;
+                instructions += `\`\`\`bash\n`;
+                instructions += `npx @hanzo/ui@latest add ${name} --style=${style}\n`;
+                instructions += `\`\`\`\n\n`;
+                // Explain what this will do
+                instructions += `This will:\n`;
+                instructions += `- Add the component file(s) to your project\n`;
+                instructions += `- Install any required npm dependencies\n`;
+                if (hasDeps) {
+                    instructions += `- Install required component dependencies: ${component.registryDependencies.join(", ")}\n`;
+                }
+                // Usage example
+                instructions += `\n## Usage\n\nAfter adding the component, you can import it in your project:\n\n`;
+                instructions += `\`\`\`tsx\n`;
+                instructions += `import { ${name.charAt(0).toUpperCase() + name.slice(1)} } from "@/components/ui/${name}"\n\n`;
+                // Add a simple example if possible
+                if (component.type.includes("ui:")) {
+                    instructions += `export default function Example() {\n`;
+                    instructions += `  return <${name.charAt(0).toUpperCase() + name.slice(1)} />\n`;
+                    instructions += `}\n`;
+                }
+                instructions += `\`\`\`\n`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: instructions,
+                        },
+                    ],
+                };
+            }
+            case "list_styles": {
+                // Find all style-related items in the registry
+                const styles = registry.items.filter(item => item.type === "registry:style" || item.type.includes("style"));
+                let styleInfo = "# Available Styles\n\n";
+                if (styles.length === 0) {
+                    styleInfo += "The registry does not define any specific styles.\n\n";
+                    styleInfo += "The default style will be used when installing components.\n";
+                }
+                else {
+                    styles.forEach(style => {
+                        styleInfo += `## ${style.name}\n\n`;
+                        styleInfo += `${style.description || 'No description available'}\n\n`;
+                        // Add usage info
+                        styleInfo += `**Usage:**\n\n`;
+                        styleInfo += `\`\`\`bash\n`;
+                        styleInfo += `# Initialize with this style\n`;
+                        styleInfo += `npx @hanzo/ui@latest init --style=${style.name}\n\n`;
+                        styleInfo += `# Install components with this style\n`;
+                        styleInfo += `npx @hanzo/ui@latest add [component] --style=${style.name}\n`;
+                        styleInfo += `\`\`\`\n\n`;
+                    });
+                }
+                return {
+                    content: [{ type: "text", text: styleInfo }],
+                };
+            }
+            case "search_registry": {
+                const query = z.string().parse(args.query).toLowerCase();
+                if (!query || query.length < 2) {
+                    return {
+                        content: [
+                            {
+                                type: "text",
+                                text: "Please provide a search term with at least 2 characters.",
+                            },
+                        ],
+                    };
+                }
+                // Search through all items in the registry
+                const results = registry.items.filter(item => {
+                    // Search in name
+                    if (item.name.toLowerCase().includes(query)) {
+                        return true;
+                    }
+                    // Search in description
+                    if (item.description?.toLowerCase().includes(query)) {
+                        return true;
+                    }
+                    // Search in category
+                    if (item.category?.toLowerCase().includes(query)) {
+                        return true;
+                    }
+                    return false;
+                });
+                if (results.length === 0) {
+                    return {
+                        content: [
+                            {
+                                type: "text",
+                                text: `No components found matching '${query}'. Try a different search term.`,
+                            },
+                        ],
+                    };
+                }
+                // Format the results
+                let searchResults = `# Search Results for '${query}'\n\n`;
+                searchResults += `Found ${results.length} matching components\n\n`;
+                results.forEach(item => {
+                    searchResults += `## ${item.name}\n\n`;
+                    searchResults += `**Type:** ${item.type}\n`;
+                    if (item.category) {
+                        searchResults += `**Category:** ${item.category}\n`;
+                    }
+                    if (item.description) {
+                        searchResults += `\n${item.description}\n`;
+                    }
+                    searchResults += `\n**Installation:**\n\n`;
+                    searchResults += `\`\`\`bash\nnpx @hanzo/ui@latest add ${item.name}\n\`\`\`\n\n`;
+                });
+                return {
+                    content: [{ type: "text", text: searchResults }],
+                };
+            }
+            default:
+                throw new Error(`Tool ${request.params.name} not found`);
+        }
+    }
+    catch (error) {
+        if (error instanceof z.ZodError) {
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: `Invalid input: ${JSON.stringify(error.errors)}`,
+                    },
+                ],
+            };
+        }
+        throw error;
+    }
+});
+/**
+ * Fetches and parses the registry from the given URL
+ * @param registryUrl - URL to the registry.json file
+ * @returns The parsed registry object
+ */
+async function getRegistry(registryUrl) {
+    try {
+        const [registryJson] = await fetchRegistry([registryUrl], {
+            useCache: false,
+        });
+        return registrySchema.parse(registryJson);
+    }
+    catch (error) {
+        console.error(`Failed to fetch registry from ${registryUrl}:`, error);
+        // Return a minimal valid registry if we can't fetch the real one
+        return {
+            name: "hanzo-ui",
+            items: [],
+        };
+    }
+}
+// Support CommonJS
+if (typeof module !== 'undefined') {
+    module.exports = { server };
+}

package/dist/primitives/accordion.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    showChevron?: boolean;
+    headerClx?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/primitives/accordion.jsx

@@ -0,0 +1,21 @@
+// @ts-nocheck
+"use client";
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../util";
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (<AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props}/>));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ showChevron = true, headerClx, className, children, ...props }, ref) => (<AccordionPrimitive.Header className={cn('flex', headerClx)}>
+    <AccordionPrimitive.Trigger ref={ref} className={cn("flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className)} {...props}>
+      {children}
+      {showChevron && <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200"/>}
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (<AccordionPrimitive.Content ref={ref} className={cn("overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", className)} {...props}>
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/primitives/action-button.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type VariantProps } from '../util';
+import type { ButtonDef } from '../types';
+import type { buttonVariants } from './button';
+declare const ActionButton: React.FC<VariantProps<typeof buttonVariants> & {
+    def: ButtonDef;
+    className?: string;
+}>;
+export default ActionButton;

package/dist/primitives/action-button.jsx

@@ -0,0 +1,16 @@
+'use client';
+import React from 'react';
+import { cn } from '../util';
+import DVC from './dialog-video-controller';
+const ActionButton = ({ def, className = '', ...rest }) => {
+    if (def.action.type === 'modal') {
+        const m = def.action.def;
+        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/dist/primitives/apply-typography.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type TypographySize = 'responsive' | 'sm' | 'base' | 'lg' | 'xl';
+declare const ApplyTypography: React.FC<React.ComponentProps<'div'> & {
+    asTag?: 'div' | 'section' | 'nav' | 'main' | 'article';
+    size?: TypographySize;
+}>;
+export { type TypographySize, ApplyTypography as default };

package/dist/primitives/apply-typography.jsx

@@ -0,0 +1,38 @@
+import React, {} from 'react';
+import { cn } from '../util';
+const ApplyTypography = ({ 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 { ApplyTypography as default };

package/dist/primitives/aspect-ratio.d.ts

@@ -0,0 +1,3 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AspectRatio;

package/dist/primitives/aspect-ratio.jsx

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

package/dist/primitives/avatar.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/primitives/avatar.jsx

@@ -0,0 +1,11 @@
+'use client';
+import React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '../util';
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (<AvatarPrimitive.Root ref={ref} className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)} {...props}/>));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (<AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props}/>));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (<AvatarPrimitive.Fallback ref={ref} className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)} {...props}/>));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/primitives/badge.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "outline" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: React.FC<BadgeProps>;
+export { Badge as default, badgeVariants, type BadgeProps };

package/dist/primitives/badge.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../util";
+const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-ring ", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-fg shadow hover:bg-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-fg hover:bg-secondary/80",
+            destructive: "border-transparent bg-destructive text-destructive-fg shadow hover:bg-destructive/80",
+            outline: "text-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const Badge = ({ className, variant, ...props }) => (<div className={cn(badgeVariants({ variant }), className)} {...props}/>);
+export { Badge as default, badgeVariants };

package/dist/primitives/breadcrumb.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    separator?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+    displayName: string;
+};
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };