@hanzo/ui 5.3.34 → 5.3.36

package/dist/primitives/list-box.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../util';
+function Item({ value, label, className, onClick, first = false, last = false, selected = false }) {
+    return (_jsx("div", { className: cn('font-normal text-muted-1 px-3 py-1 cursor-pointer hover:text-foreground ', last ? '' : 'border-b', selected ? 'font-semibold text-accent hover:text-accent' : '', className), onClick: () => { onClick(value); }, children: _jsx("span", { children: label }) }));
+}
+function ListBox({ values, labels, onValueChange, value, isEqual, clx = '', itemClx = '' }) {
+    return (_jsx("div", { className: cn('border rounded-md select-none', clx), children: values.map((val, i) => (_jsx(Item, { value: val, label: labels[i], onClick: onValueChange, className: itemClx, first: i === 0, last: i === values.length - 1, selected: value && isEqual(val, value) }, labels[i]))) }));
+}
+export default ListBox;

package/dist/primitives/loading-spinner.d.ts

@@ -0,0 +1,6 @@
+declare const LoadingSpinner: React.FC<{
+    size?: number;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>>;
+export default LoadingSpinner;
+//# sourceMappingURL=loading-spinner.d.ts.map

package/dist/primitives/loading-spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.d.ts","sourceRoot":"","sources":["../../primitives/loading-spinner.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAC5B;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GACC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAsBhC,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/primitives/loading-spinner.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../util';
+// cf: https://github.com/hanzo-ui/ui/discussions/1694#discussioncomment-7851248
+const LoadingSpinner = ({ size = 24, className = '', ...props }) => {
+    return (_jsx("svg", { width: size, height: size, ...props, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("animate-spin", className), children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
+};
+export default LoadingSpinner;

package/dist/primitives/markdown-preview.d.ts

@@ -0,0 +1,129 @@
+import { Primitive } from '@radix-ui/react-primitive';
+import { Element } from 'hast';
+import React, { type ComponentPropsWithoutRef, type ComponentType, type ElementType, type FC, type ReactNode } from 'react';
+import { Options } from 'react-markdown';
+import { type SyntaxHighlighterProps as SHP } from 'react-syntax-highlighter';
+export type CodeHeaderProps = {
+    node?: Element | undefined;
+    language: string | undefined;
+    code: string;
+};
+export declare const CodeHeader: FC<CodeHeaderProps>;
+export declare const makePrismAsyncLightSyntaxHighlighter: (config: Omit<SHP, "language" | "children">) => React.FC<SyntaxHighlighterProps>;
+export declare const SyntaxHighlighterBase: React.FC<SyntaxHighlighterProps>;
+export declare const defaultComponents: {
+    h1: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    h2: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    h3: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    h4: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    h5: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    h6: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    p: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    a: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    blockquote: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    ul: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    ol: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    hr: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    table: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    thead: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    th: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    td: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    tr: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    sup: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    pre: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    code: ({ className, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+    CodeHeader: React.FC<CodeHeaderProps>;
+    SyntaxHighlighter: React.FC<SyntaxHighlighterProps>;
+};
+export type PreComponent = ComponentType<ComponentPropsWithoutRef<'pre'> & {
+    node?: Element | undefined;
+}>;
+export type CodeComponent = ComponentType<ComponentPropsWithoutRef<'code'> & {
+    node?: Element | undefined;
+}>;
+export declare const PreContext: React.Context<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>, "ref"> & {
+    node?: Element | undefined;
+}, "children"> | null>;
+export declare const IsRunningContext: React.Context<boolean | undefined>;
+export declare const useIsMarkdownCodeBlock: () => boolean;
+export declare const useIsRunning: () => boolean | undefined;
+export declare const PreOverride: PreComponent;
+export declare const DefaultPre: PreComponent;
+export declare const DefaultCode: CodeComponent;
+export declare const DefaultCodeBlockContent: ComponentType<{
+    node: Element | undefined;
+    components: {
+        Pre: PreComponent;
+        Code: CodeComponent;
+    };
+    code: string | ReactNode | undefined;
+}>;
+export declare const DefaultCodeHeader: ComponentType<CodeHeaderProps>;
+type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
+export type MarkdownTextPrimitiveProps = Omit<Options, 'components' | 'children'> & {
+    className?: string;
+    containerProps?: Omit<PrimitiveDivProps, 'children' | 'asChild'> | undefined;
+    containerComponent?: ElementType;
+    componentsByLanguage?: Record<string, {
+        CodeHeader?: ComponentType<CodeHeaderProps> | undefined;
+        SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps> | undefined;
+    }> | undefined;
+    components?: (NonNullable<Options['components']> & {
+        SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps> | undefined;
+        CodeHeader?: ComponentType<CodeHeaderProps> | undefined;
+    }) | undefined;
+    content: string;
+    ref?: React.RefObject<HTMLDivElement>;
+};
+export type CodeOverrideProps = ComponentPropsWithoutRef<CodeComponent> & {
+    components: {
+        Pre: PreComponent;
+        Code: CodeComponent;
+        CodeHeader: ComponentType<CodeHeaderProps>;
+        SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;
+    };
+    componentsByLanguage?: Record<string, {
+        CodeHeader?: ComponentType<CodeHeaderProps>;
+        SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps>;
+    }> | undefined;
+};
+export type SyntaxHighlighterProps = {
+    components: {
+        Pre: PreComponent;
+        Code: CodeComponent;
+    };
+    language: string;
+    code: string;
+    isRunning?: boolean;
+};
+export type CodeBlockProps = {
+    node: Element | undefined;
+    language: string;
+    code: string;
+    components: {
+        Pre: PreComponent;
+        Code: CodeComponent;
+        CodeHeader: ComponentType<CodeHeaderProps>;
+        SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;
+    };
+    isRunning?: boolean;
+};
+export declare const DefaultCodeBlock: FC<CodeBlockProps>;
+export declare const withDefaultProps: <TProps extends {
+    className?: string | undefined;
+}>({ className, ...defaultProps }: Partial<TProps>) => ({ className: classNameProp, ...props }: TProps) => TProps;
+export declare const CodeOverrideBase: FC<CodeOverrideProps>;
+export declare const CodeOverride: React.NamedExoticComponent<CodeOverrideProps>;
+export declare const MarkdownTextPrimitive: {
+    ({ components: userComponents, className, containerProps, containerComponent: Container, content, componentsByLanguage, ref, isRunning, ...rest }: MarkdownTextPrimitiveProps & {
+        isRunning?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type MakeMarkdownTextProps = MarkdownTextPrimitiveProps & {
+    isRunning?: boolean;
+};
+export declare const MarkdownTextBase: ({ className, isRunning, components: userComponents, ...rest }: MakeMarkdownTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MarkdownText: React.MemoExoticComponent<({ className, isRunning, components: userComponents, ...rest }: MakeMarkdownTextProps) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=markdown-preview.d.ts.map

package/dist/primitives/markdown-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-preview.d.ts","sourceRoot":"","sources":["../../primitives/markdown-preview.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/markdown-preview.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
+import { createContext, memo, useContext, useMemo, } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { PrismAsyncLight, } from 'react-syntax-highlighter';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import { default as github } from 'react-syntax-highlighter/dist/esm/styles/hljs/github';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import { memoCompareNodes, memoizeMarkdownComponents, } from '../helpers/memoization';
+import { cn } from '../src/utils';
+import { CopyToClipboardIcon } from './copy-to-clipboard-icon';
+import { MermaidDiagram } from './mermaid';
+export const CodeHeader = ({ language, code }) => {
+    return (_jsxs("div", { className: "code-header-root bg-bg-darker text-text-default flex items-center justify-between gap-4 rounded-t-lg px-4 py-1", children: [_jsx("span", { className: "code-header-language text-text-secondary text-xs font-medium lowercase", children: language }), _jsx(CopyToClipboardIcon, { className: cn('text-text-secondary h-7 w-7 bg-transparent hover:bg-gray-900 [&>svg]:h-3 [&>svg]:w-3'), string: code })] }));
+};
+const makeMakeSyntaxHighlighter = (SyntaxHighlighter) => (config) => {
+    const PrismSyntaxHighlighter = ({ components: { Pre, Code }, language, code, }) => {
+        return (_jsx(SyntaxHighlighter, { CodeTag: Code, PreTag: Pre, ...config, language: language, children: code }));
+    };
+    PrismSyntaxHighlighter.displayName = 'PrismSyntaxHighlighter';
+    return PrismSyntaxHighlighter;
+};
+// register languages you want to support
+PrismAsyncLight.registerLanguage('js', tsx);
+PrismAsyncLight.registerLanguage('jsx', tsx);
+PrismAsyncLight.registerLanguage('ts', tsx);
+PrismAsyncLight.registerLanguage('tsx', tsx);
+PrismAsyncLight.registerLanguage('python', python);
+export const makePrismAsyncLightSyntaxHighlighter = makeMakeSyntaxHighlighter(PrismAsyncLight);
+export const SyntaxHighlighterBase = makePrismAsyncLightSyntaxHighlighter({
+    style: github,
+    customStyle: {
+        margin: 0,
+        width: '100%',
+        background: 'var(--color-bg-darker)',
+        padding: '1.5rem 1rem',
+        fontSize: '0.875em',
+    },
+});
+export const defaultComponents = memoizeMarkdownComponents({
+    h1: ({ className, ...props }) => (_jsx("h1", { className: cn('mt-[1em] mb-[0.7em] scroll-m-20 text-[1.375rem] font-bold last:mb-0', className), ...props })),
+    h2: ({ className, ...props }) => (_jsx("h2", { className: cn('text-em-xl mt-[0.8em] mb-[0.4em] scroll-m-20 font-semibold first:mt-0 last:mb-0', className), ...props })),
+    h3: ({ className, ...props }) => (_jsx("h3", { className: cn('text-em-lg mt-[1em] mb-[0.5em] scroll-m-20 font-semibold first:mt-0 last:mb-0', className), ...props })),
+    h4: ({ className, ...props }) => (_jsx("h4", { className: cn('text-em-base mt-[1em] mb-[0.5em] scroll-m-20 font-semibold first:mt-0 last:mb-0', className), ...props })),
+    h5: ({ className, ...props }) => (_jsx("h5", { className: cn('text-em-base mt-[1em] mb-[0.5em] font-semibold first:mt-0 last:mb-0', className), ...props })),
+    h6: ({ className, ...props }) => (_jsx("h6", { className: cn('text-em-base mt-[1em] mb-[0.5em] font-semibold first:mt-0 last:mb-0', className), ...props })),
+    p: ({ className, ...props }) => (_jsx("p", { className: cn('text-em-base my-[0.5em] first:mt-0 last:mb-0', className), ...props })),
+    a: ({ className, ...props }) => (_jsx("a", { className: cn('font-medium text-blue-400 underline underline-offset-4', className), target: "_blank", ...props })),
+    blockquote: ({ className, ...props }) => (_jsx("blockquote", { className: cn('border-l-2 pl-6 italic', className), ...props })),
+    ul: ({ className, ...props }) => (_jsx("ul", { className: cn('text-em-base my-[1em] ml-6 list-disc [&>li]:mt-2', className), ...props })),
+    ol: ({ className, ...props }) => (_jsx("ol", { className: cn('text-em-base my-[1em] ml-6 list-decimal [&>li]:mt-[0.5em]', className), ...props })),
+    hr: ({ className, ...props }) => (_jsx("hr", { className: cn('border-divider my-[2.25em] border-b', className), ...props })),
+    table: ({ className, ...props }) => (_jsx("div", { className: "my-[1.5em] size-full overflow-x-auto", children: _jsx("table", { className: "w-full border-collapse border-spacing-0", ...props }) })),
+    thead: ({ className, ...props }) => (_jsx("thead", { className: cn('[&>tr]:border-none', className), ...props })),
+    th: ({ className, ...props }) => (_jsx("th", { className: cn('text-em-sm px-[1em] py-[0.875em] text-left font-semibold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right', className), ...props })),
+    td: ({ className, ...props }) => (_jsx("td", { className: cn('text-em-sm border-divider border-b px-[1em] py-[0.875em] text-left [&[align=center]]:text-center [&[align=right]]:text-right', className), ...props })),
+    tr: ({ className, ...props }) => (_jsx("tr", { className: cn('m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg', className), ...props })),
+    sup: ({ className, ...props }) => (_jsx("sup", { className: cn('[&>a]:text-em-xs [&>a]:no-underline', className), ...props })),
+    pre: ({ className, ...props }) => (_jsx("pre", { className: cn('bg-bg-darker text-text-default overflow-x-auto rounded-b-lg !px-[1em] !py-[0.5em]', className), ...props })),
+    code: function Code({ className, ...props }) {
+        const isCodeBlock = useIsMarkdownCodeBlock();
+        return (_jsx("code", { className: cn(!isCodeBlock &&
+                'bg-bg-darker text-em-sm border-divider rounded-sm p-[0.25em] font-semibold', className), ...props }));
+    },
+    CodeHeader,
+    SyntaxHighlighter: SyntaxHighlighterBase,
+});
+export const PreContext = createContext(null);
+export const IsRunningContext = createContext(undefined);
+export const useIsMarkdownCodeBlock = () => {
+    return useContext(PreContext) !== null;
+};
+export const useIsRunning = () => {
+    return useContext(IsRunningContext);
+};
+export const PreOverride = ({ children, ...rest }) => {
+    return _jsx(PreContext.Provider, { value: rest, children: children });
+};
+export const DefaultPre = ({ className, ...rest }) => _jsx("pre", { className: className, ...rest });
+export const DefaultCode = ({ className, ...rest }) => (_jsx("code", { className: className, ...rest }));
+export const DefaultCodeBlockContent = ({ node, components: { Pre, Code }, code }) => (_jsx(Pre, { children: _jsx(Code, { node: node, children: code }) }));
+export const DefaultCodeHeader = () => null;
+export const DefaultCodeBlock = ({ node, components: { Pre, Code, SyntaxHighlighter, CodeHeader }, language, code, isRunning, }) => {
+    const components = useMemo(() => ({ Pre, Code }), [Pre, Code]);
+    const SH = !!language ? SyntaxHighlighter : DefaultCodeBlockContent;
+    return (_jsxs(_Fragment, { children: [_jsx(CodeHeader, { node: node, language: language, code: code }), _jsx(SH, { node: node, components: components, language: language ?? 'unknown', code: code, isRunning: isRunning })] }));
+};
+export const withDefaultProps = ({ className, ...defaultProps }) => ({ className: classNameProp, ...props }) => {
+    return {
+        className: cn(className, classNameProp),
+        ...defaultProps,
+        ...props,
+    };
+};
+const CodeBlockOverride = ({ node, components: { Pre, Code, SyntaxHighlighter: FallbackSyntaxHighlighter, CodeHeader: FallbackCodeHeader, }, componentsByLanguage = {}, children, ...codeProps }) => {
+    const preProps = useContext(PreContext);
+    const isRunning = useIsRunning();
+    const getPreProps = withDefaultProps(preProps);
+    const WrappedPre = useCallbackRef((props) => (_jsx(Pre, { ...getPreProps(props) })));
+    const getCodeProps = withDefaultProps(codeProps);
+    const WrappedCode = useCallbackRef((props) => (_jsx(Code, { ...getCodeProps(props) })));
+    const language = /language-(\w+)/.exec(codeProps.className || '')?.[1] ?? '';
+    // if the code content is not string (due to rehype plugins), return a default code block
+    if (typeof children !== 'string') {
+        return (_jsx(DefaultCodeBlockContent, { code: children, components: { Pre: WrappedPre, Code: WrappedCode }, node: node }));
+    }
+    const SyntaxHighlighter = componentsByLanguage[language]?.SyntaxHighlighter ??
+        FallbackSyntaxHighlighter;
+    const CodeHeader = componentsByLanguage[language]?.CodeHeader ?? FallbackCodeHeader;
+    return (_jsx(DefaultCodeBlock, { node: node, components: {
+            Pre: WrappedPre,
+            Code: WrappedCode,
+            SyntaxHighlighter,
+            CodeHeader,
+        }, language: language || 'unknown', code: children, isRunning: isRunning }));
+};
+export const CodeOverrideBase = ({ node, components, componentsByLanguage, ...props }) => {
+    const isCodeBlock = useContext(PreContext) !== null;
+    if (!isCodeBlock)
+        return _jsx(components.Code, { ...props });
+    return (_jsx(CodeBlockOverride, { components: components, componentsByLanguage: componentsByLanguage, node: node, ...props }));
+};
+export const CodeOverride = memo(CodeOverrideBase, (prev, next) => {
+    const isEqual = prev.components === next.components &&
+        prev.componentsByLanguage === next.componentsByLanguage &&
+        memoCompareNodes(prev, next);
+    return isEqual;
+});
+export const MarkdownTextPrimitive = ({ components: userComponents, className, containerProps, containerComponent: Container = 'div', content, componentsByLanguage, ref, isRunning, ...rest }) => {
+    const { pre = DefaultPre, code = DefaultCode, SyntaxHighlighter = DefaultCodeBlockContent, CodeHeader = DefaultCodeHeader, } = userComponents ?? {};
+    const useCodeOverrideComponents = useMemo(() => {
+        return {
+            Pre: pre,
+            Code: code,
+            SyntaxHighlighter,
+            CodeHeader,
+        };
+    }, [pre, code, SyntaxHighlighter, CodeHeader]);
+    const CodeComponent = useCallbackRef((props) => (_jsx(CodeOverride, { components: useCodeOverrideComponents, componentsByLanguage: componentsByLanguage, ...props })));
+    const components = useMemo(() => {
+        const { pre, code, SyntaxHighlighter, CodeHeader, ...componentsRest } = userComponents ?? {};
+        return {
+            ...componentsRest,
+            pre: PreOverride,
+            code: CodeComponent,
+        };
+    }, [CodeComponent, userComponents]);
+    return (_jsx(Container
+    // data-status={status.type}
+    , { ...containerProps, className: cn(className, containerProps?.className), ref: ref, children: _jsx(IsRunningContext.Provider, { value: isRunning, children: _jsx(ReactMarkdown, { components: components, ...rest, children: content }) }) }));
+};
+MarkdownTextPrimitive.displayName = 'MarkdownTextPrimitive';
+export const MarkdownTextBase = ({ className, isRunning, components: userComponents, ...rest }) => {
+    return (_jsx(MarkdownTextPrimitive, { components: defaultComponents, remarkPlugins: [remarkGfm, remarkMath], rehypePlugins: [rehypeKatex], className: cn(isRunning && 'md-running', className), isRunning: isRunning, componentsByLanguage: {
+            mermaid: {
+                SyntaxHighlighter: MermaidDiagram,
+            },
+        }, ...rest }));
+};
+export const MarkdownText = memo(MarkdownTextBase, (prev, next) => prev.content === next.content &&
+    prev.isRunning === next.isRunning &&
+    prev.className === next.className);

package/dist/primitives/menubar.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+declare function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const MenubarSubTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarSubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarCheckboxItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarRadioItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarLabel: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarSeparator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenubarShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarPortal, MenubarSubContent, MenubarSubTrigger, MenubarGroup, MenubarSub, MenubarShortcut, };
+//# sourceMappingURL=menubar.d.ts.map

package/dist/primitives/menubar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../primitives/menubar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAK3D,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAErD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,2CAEtD;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,UAAU,CAAC,2CAE1D;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,GAAG,CAAC,2CAEnD;AAED,QAAA,MAAM,OAAO,yJAYX,CAAA;AAGF,QAAA,MAAM,cAAc,sKAYlB,CAAA;AAGF,QAAA,MAAM,iBAAiB;YAGX,OAAO;wCAejB,CAAA;AAGF,QAAA,MAAM,iBAAiB,mKAYrB,CAAA;AAGF,QAAA,MAAM,cAAc,gKAsBnB,CAAA;AAGD,QAAA,MAAM,WAAW;YAGL,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,mBAAmB,qKAoBvB,CAAA;AAGF,QAAA,MAAM,gBAAgB,kKAmBpB,CAAA;AAGF,QAAA,MAAM,YAAY;YAGN,OAAO;wCAYjB,CAAA;AAGF,QAAA,MAAM,gBAAgB,kKASpB,CAAA;AAGF,QAAA,MAAM,eAAe;8BAGlB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;;CAUvC,CAAA;AAGD,OAAO,EACL,OAAO,EACP,WAAW,EACX,cAAc,EACd,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,UAAU,EACV,eAAe,GAChB,CAAA"}

package/dist/primitives/menubar.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../src/utils";
+function MenubarMenu({ ...props }) {
+    return _jsx(MenubarPrimitive.Menu, { ...props });
+}
+function MenubarGroup({ ...props }) {
+    return _jsx(MenubarPrimitive.Group, { ...props });
+}
+function MenubarPortal({ ...props }) {
+    return _jsx(MenubarPrimitive.Portal, { ...props });
+}
+function MenubarRadioGroup({ ...props }) {
+    return _jsx(MenubarPrimitive.RadioGroup, { ...props });
+}
+function MenubarSub({ ...props }) {
+    return _jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
+}
+const Menubar = React.forwardRef(({ className, ...props }, ref) => (_jsx(MenubarPrimitive.Root, { ref: ref, className: cn("flex h-10 items-center space-x-1 rounded-md border bg-background p-1", className), ...props })));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+const MenubarTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(MenubarPrimitive.Trigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className), ...props })));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+const MenubarSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(MenubarPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+const MenubarSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(MenubarPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground 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 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 origin-[--radix-menubar-content-transform-origin]", className), ...props })));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+const MenubarContent = React.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (_jsx(MenubarPrimitive.Portal, { children: _jsx(MenubarPrimitive.Content, { ref: ref, align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn("z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 origin-[--radix-menubar-content-transform-origin]", className), ...props }) })));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+const MenubarItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(MenubarPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+const MenubarCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(MenubarPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+const MenubarRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(MenubarPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+const MenubarLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(MenubarPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+const MenubarSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(MenubarPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+const MenubarShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
+};
+MenubarShortcut.displayName = "MenubarShortcut";
+export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarLabel, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarPortal, MenubarSubContent, MenubarSubTrigger, MenubarGroup, MenubarSub, MenubarShortcut, };

package/dist/primitives/mermaid.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SyntaxHighlighterProps } from './markdown-preview';
+export type MermaidDiagramProps = SyntaxHighlighterProps & {
+    className?: string;
+    isRunning?: boolean;
+};
+export declare const MermaidDiagram: FC<MermaidDiagramProps>;
+//# sourceMappingURL=mermaid.d.ts.map

package/dist/primitives/mermaid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mermaid.d.ts","sourceRoot":"","sources":["../../primitives/mermaid.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAG5D,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,GAAG;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA+BF,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAgJlD,CAAC"}

package/dist/primitives/mermaid.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// import { save } from '@tauri-apps/plugin-dialog'; // Not available in web environment
+// import * as fs from '@tauri-apps/plugin-fs'; // Not available in web environment
+import { RotateCcw, Download } from 'lucide-react';
+// @ts-ignore - mermaid is an optional peerDependency
+import mermaid from 'mermaid';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { toast } from 'sonner';
+import svgPanZoom from 'svg-pan-zoom';
+import { cn } from '../src/utils';
+import { Button } from './button';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+mermaid.initialize({
+    startOnLoad: true,
+    mindmap: {
+        useWidth: 800,
+    },
+    theme: 'dark',
+    fontSize: 18,
+    darkMode: true,
+    fontFamily: 'Inter',
+});
+const generateId = () => `mermaid-${Math.random().toString(36).slice(2)}`;
+const downloadBlob = async (blob, filename) => {
+    // Web-compatible download (instead of Tauri)
+    try {
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+        toast.success('Mermaid diagram saved successfully');
+    }
+    catch (error) {
+        toast.error('Failed to download diagram');
+    }
+};
+export const MermaidDiagram = ({ code, className, isRunning, }) => {
+    const ref = useRef(null);
+    const lastCode = useRef(null);
+    const [instance, setInstance] = useState(null);
+    const isComplete = !isRunning;
+    const resetZoom = useCallback(() => {
+        instance?.fit();
+        instance?.center();
+    }, [instance]);
+    const downloadSVG = useCallback(() => {
+        if (ref.current) {
+            const svg = ref.current.innerHTML;
+            const blob = new Blob([svg], { type: 'image/svg+xml' });
+            void downloadBlob(blob, 'mermaid-diagram.svg');
+        }
+    }, []);
+    const enableZoom = useCallback(() => {
+        instance?.enablePan();
+        instance?.enableZoom();
+    }, [instance]);
+    const disableZoom = useCallback(() => {
+        instance?.disablePan();
+        instance?.disableZoom();
+    }, [instance]);
+    const handleFocus = useCallback(() => {
+        enableZoom();
+    }, [enableZoom]);
+    const handleBlur = useCallback(() => {
+        disableZoom();
+    }, [disableZoom]);
+    const handleClick = useCallback(() => {
+        if (ref.current) {
+            ref.current.focus();
+        }
+    }, []);
+    useEffect(() => {
+        if (!isComplete || !ref.current || !code)
+            return;
+        if (lastCode.current === code)
+            return;
+        void (async () => {
+            try {
+                const id = generateId();
+                const { svg } = await mermaid.render(id, code);
+                if (ref.current) {
+                    ref.current.innerHTML = svg;
+                    const svgElement = ref.current.querySelector('svg');
+                    if (svgElement) {
+                        svgElement.setAttribute('height', '100%');
+                        svgElement.setAttribute('width', '100%');
+                        svgElement.style.height = '100%';
+                        svgElement.style.width = '100%';
+                        svgElement.style.position = 'absolute';
+                        svgElement.style.top = '0';
+                        svgElement.style.left = '0';
+                        const panZoomInstance = svgPanZoom(svgElement);
+                        panZoomInstance.fit();
+                        panZoomInstance.center();
+                        panZoomInstance.zoomAtPoint(1, { x: 0, y: 0 });
+                        panZoomInstance.disablePan();
+                        panZoomInstance.disableZoom();
+                        setInstance(panZoomInstance);
+                    }
+                }
+                lastCode.current = code;
+            }
+            catch (e) {
+                console.warn('Failed to render Mermaid diagram:', e);
+            }
+        })();
+    }, [code, isComplete]);
+    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "absolute top-2 right-2 z-10 flex gap-1", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", onClick: resetZoom, className: "text-text-secondary", children: _jsx(RotateCcw, { size: 14 }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Reset Zoom" }) })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", onClick: downloadSVG, className: "text-text-secondary", children: _jsx(Download, { size: 14 }) }) }), _jsx(TooltipContent, { children: _jsx("p", { children: "Download SVG" }) })] })] }), _jsx("div", { onClick: handleClick, className: "text-text-secondary bg-bg-quaternary absolute right-2 bottom-2 z-10 rounded px-2 py-1 text-xs", children: "Click to focus, then scroll to zoom & drag to pan" }), _jsx("div", { ref: ref, tabIndex: 0, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, className: cn('text-text-secondary bg-bg-quaternary focus:ring-opacity-50 relative w-full cursor-grab overflow-hidden rounded-b-lg p-4 py-10 text-center text-sm focus:cursor-grabbing focus:ring-2 focus:ring-blue-500 focus:outline-none', className), style: { width: '100%', minHeight: '400px' }, children: "Drawing diagram..." })] }));
+};

package/dist/primitives/native-select.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export interface NativeSelectProps extends Omit<React.ComponentProps<"select">, "size"> {
+    size?: "sm" | "default";
+}
+declare const NativeSelect: React.ForwardRefExoticComponent<Omit<NativeSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+declare const NativeSelectOption: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "ref"> & React.RefAttributes<HTMLOptionElement>>;
+declare const NativeSelectOptGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OptgroupHTMLAttributes<HTMLOptGroupElement>, HTMLOptGroupElement>, "ref"> & React.RefAttributes<HTMLOptGroupElement>>;
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
+//# sourceMappingURL=native-select.d.ts.map

package/dist/primitives/native-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../primitives/native-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB;AAED,QAAA,MAAM,YAAY,0GA2BjB,CAAA;AAGD,QAAA,MAAM,kBAAkB,kLAKtB,CAAA;AAGF,QAAA,MAAM,oBAAoB,0LAUxB,CAAA;AAGF,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/primitives/native-select.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../src/utils";
+const NativeSelect = React.forwardRef(({ className, size = "default", ...props }, ref) => {
+    return (_jsxs("div", { className: "group/native-select relative w-fit has-[select:disabled]:opacity-50", "data-slot": "native-select-wrapper", children: [_jsx("select", { ref: ref, "data-slot": "native-select", "data-size": size, className: cn("border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className), ...props }), _jsx(ChevronDown, { className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
+});
+NativeSelect.displayName = "NativeSelect";
+const NativeSelectOption = React.forwardRef(({ ...props }, ref) => (_jsx("option", { ref: ref, "data-slot": "native-select-option", ...props })));
+NativeSelectOption.displayName = "NativeSelectOption";
+const NativeSelectOptGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx("optgroup", { ref: ref, "data-slot": "native-select-optgroup", className: cn(className), ...props })));
+NativeSelectOptGroup.displayName = "NativeSelectOptGroup";
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/primitives/navigation-menu.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const NavigationMenuViewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, };
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/primitives/navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../primitives/navigation-menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,uBAAuB,MAAM,iCAAiC,CAAA;AAM1E,QAAA,MAAM,cAAc,iKAelB,CAAA;AAGF,QAAA,MAAM,kBAAkB,+KAYtB,CAAA;AAGF,QAAA,MAAM,kBAAkB,yKAStB,CAAA;AAGF,QAAA,MAAM,0BAA0B,oFAK/B,CAAA;AAED,QAAA,MAAM,qBAAqB,oLAezB,CAAA;AAGF,QAAA,MAAM,qBAAqB,8KAczB,CAAA;AAGF,QAAA,MAAM,kBAAkB,2HAA+B,CAAA;AAEvD,QAAA,MAAM,sBAAsB,+KAe1B,CAAA;AAIF,QAAA,MAAM,uBAAuB,gLAe3B,CAAA;AAIF,OAAO,EACL,0BAA0B,EAC1B,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,GACvB,CAAA"}