@hanzo/ui 5.3.34 → 5.3.36

package/dist/code/snippet.mjs

@@ -1,250 +1,3 @@
 "use client";
-import * as React from 'react';
-import { cva } from 'class-variance-authority';
-import { FileText, Minimize2, Maximize2, Check, Copy } from 'lucide-react';
-import { bundledLanguages, codeToHtml } from 'shiki';
-import { cn } from '@hanzo/ui/lib/utils';
-import { Badge } from '@hanzo/ui/badge';
-import { Button } from '@hanzo/ui/button';
-import { Skeleton } from '@hanzo/ui/skeleton';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var codeSnippetVariants = cva("relative group", {
-  variants: {
-    variant: {
-      default: "rounded-lg border bg-muted/50",
-      inline: "inline-block rounded-md bg-muted px-2 py-1",
-      minimal: "bg-transparent"
-    },
-    theme: {
-      dark: "bg-slate-950 border-slate-800",
-      light: "bg-slate-50 border-slate-200",
-      github: "bg-white border-slate-200",
-      "github-dark": "bg-slate-900 border-slate-700",
-      terminal: "bg-black border-green-500/30 text-green-400",
-      retro: "bg-amber-50 border-amber-200 text-amber-900"
-    },
-    size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      default: "text-sm",
-      lg: "text-base"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    theme: "dark",
-    size: "default"
-  }
-});
-var CodeSnippet = React.forwardRef(
-  ({
-    className,
-    variant,
-    theme,
-    size,
-    code,
-    language = "text",
-    filename,
-    showLineNumbers = false,
-    highlightLines = [],
-    showCopyButton = true,
-    showLanguageBadge = true,
-    showHeader = true,
-    maxHeight,
-    expandable = false,
-    collapsedHeight = "200px",
-    wrapLines = false,
-    startLineNumber = 1,
-    ...props
-  }, ref) => {
-    const [highlightedCode, setHighlightedCode] = React.useState("");
-    const [copied, setCopied] = React.useState(false);
-    const [isLoading, setIsLoading] = React.useState(true);
-    const [isExpanded, setIsExpanded] = React.useState(!expandable);
-    const themeMap = {
-      dark: "github-dark",
-      light: "github-light",
-      github: "github-light",
-      "github-dark": "github-dark",
-      terminal: "github-dark",
-      retro: "github-light"
-    };
-    React.useEffect(() => {
-      const highlightCode = /* @__PURE__ */ __name(async () => {
-        setIsLoading(true);
-        try {
-          const supportedLang = Object.keys(bundledLanguages).includes(language);
-          const highlighted = await codeToHtml(code, {
-            lang: supportedLang ? language : "text",
-            theme: themeMap[theme || "dark"]
-          });
-          const tempDiv = document.createElement("div");
-          tempDiv.innerHTML = highlighted;
-          const codeElement = tempDiv.querySelector("code");
-          setHighlightedCode(codeElement?.innerHTML || highlighted);
-        } catch (error) {
-          console.error("Failed to highlight code:", error);
-          const escaped = code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-          setHighlightedCode(escaped);
-        } finally {
-          setIsLoading(false);
-        }
-      }, "highlightCode");
-      highlightCode();
-    }, [code, language, theme]);
-    const copyToClipboard = React.useCallback(async () => {
-      try {
-        await navigator.clipboard.writeText(code);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
-      } catch (error) {
-        console.error("Failed to copy code:", error);
-      }
-    }, [code]);
-    const lines = highlightedCode.split("\n").filter((line, index, array) => {
-      return line.trim() !== "" || index < array.length - 1;
-    });
-    const renderInline = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx(
-      "code",
-      {
-        className: cn(
-          codeSnippetVariants({ variant, theme, size }),
-          "font-mono",
-          className
-        ),
-        dangerouslySetInnerHTML: { __html: highlightedCode }
-      }
-    ), "renderInline");
-    const renderBlock = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          codeSnippetVariants({ variant, theme, size }),
-          "overflow-hidden",
-          className
-        ),
-        ...props,
-        children: [
-          showHeader && (filename || language || showCopyButton || expandable) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-4 py-2 bg-muted/30", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              filename && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: filename })
-              ] }),
-              showLanguageBadge && language && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: language })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              expandable && /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: () => setIsExpanded(!isExpanded),
-                  className: "h-8 w-8 p-0",
-                  children: [
-                    isExpanded ? /* @__PURE__ */ jsx(Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-3.5 w-3.5" }),
-                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: isExpanded ? "Collapse" : "Expand" })
-                  ]
-                }
-              ),
-              showCopyButton && /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: copyToClipboard,
-                  className: "h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
-                  children: [
-                    copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }),
-                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: copied ? "Copied" : "Copy code" })
-                  ]
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn("overflow-auto", !wrapLines && "overflow-x-auto"),
-              style: {
-                maxHeight: isExpanded ? maxHeight : collapsedHeight
-              },
-              children: isLoading ? /* @__PURE__ */ jsx("div", { className: "p-4 space-y-2", children: Array.from({ length: Math.min(lines.length || 5, 10) }).map(
-                (_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-                  showLineNumbers && /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-8" }),
-                  /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })
-                ] }, i)
-              ) }) : /* @__PURE__ */ jsx("div", { className: "font-mono", children: lines.map((line, index) => {
-                const lineNumber = index + startLineNumber;
-                const isHighlighted = highlightLines.includes(lineNumber);
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "group relative flex min-h-[1.5rem] items-center px-4 py-0.5",
-                      isHighlighted && "bg-blue-500/10 border-l-2 border-l-blue-500",
-                      !wrapLines && "whitespace-nowrap"
-                    ),
-                    children: [
-                      showLineNumbers && /* @__PURE__ */ jsx("span", { className: "mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground", children: lineNumber }),
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: cn(
-                            "flex-1",
-                            wrapLines ? "whitespace-pre-wrap break-words" : "overflow-x-auto"
-                          ),
-                          dangerouslySetInnerHTML: { __html: line }
-                        }
-                      )
-                    ]
-                  },
-                  index
-                );
-              }) })
-            }
-          ),
-          expandable && !isExpanded && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
-          variant === "minimal" && showCopyButton && /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              onClick: copyToClipboard,
-              className: "absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",
-              children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-green-500" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
-            }
-          )
-        ]
-      }
-    ), "renderBlock");
-    if (variant === "inline") {
-      return renderInline();
-    }
-    return renderBlock();
-  }
-);
-CodeSnippet.displayName = "CodeSnippet";
-var InlineCode = React.forwardRef(({ children, language, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    CodeSnippet,
-    {
-      ref,
-      code: children,
-      language,
-      variant: "inline",
-      showCopyButton: false,
-      showLanguageBadge: false,
-      showHeader: false,
-      className,
-      ...props
-    }
-  );
-});
-InlineCode.displayName = "InlineCode";
-
-export { CodeSnippet, InlineCode, codeSnippetVariants };
+import*as t from'react';import {cva}from'class-variance-authority';import {FileText,Minimize2,Maximize2,Check,Copy}from'lucide-react';import {bundledLanguages,codeToHtml}from'shiki';import {cn}from'@hanzo/ui/lib/utils';import {Badge}from'@hanzo/ui/badge';import {Button}from'@hanzo/ui/button';import {Skeleton}from'@hanzo/ui/skeleton';import {jsx,jsxs}from'react/jsx-runtime';var U=Object.defineProperty;var b=(l,o)=>U(l,"name",{value:o,configurable:true});var B=cva("relative group",{variants:{variant:{default:"rounded-lg border bg-muted/50",inline:"inline-block rounded-md bg-muted px-2 py-1",minimal:"bg-transparent"},theme:{dark:"bg-slate-950 border-slate-800",light:"bg-slate-50 border-slate-200",github:"bg-white border-slate-200","github-dark":"bg-slate-900 border-slate-700",terminal:"bg-black border-green-500/30 text-green-400",retro:"bg-amber-50 border-amber-200 text-amber-900"},size:{xs:"text-xs",sm:"text-sm",default:"text-sm",lg:"text-base"}},defaultVariants:{variant:"default",theme:"dark",size:"default"}}),I=t.forwardRef(({className:l,variant:o,theme:c,size:p,code:i,language:d="text",filename:f,showLineNumbers:w=false,highlightLines:z=[],showCopyButton:v=true,showLanguageBadge:V=true,showHeader:_=true,maxHeight:P,expandable:h=false,collapsedHeight:A="200px",wrapLines:x=false,startLineNumber:D=1,...F},j)=>{let[k,C]=t.useState(""),[y,H]=t.useState(false),[q,L]=t.useState(true),[m,O]=t.useState(!h),G={dark:"github-dark",light:"github-light",github:"github-light","github-dark":"github-dark",terminal:"github-dark",retro:"github-light"};t.useEffect(()=>{b(async()=>{L(true);try{let a=Object.keys(bundledLanguages).includes(d),s=await codeToHtml(i,{lang:a?d:"text",theme:G[c||"dark"]}),u=document.createElement("div");u.innerHTML=s;let Q=u.querySelector("code");C(Q?.innerHTML||s);}catch(a){console.error("Failed to highlight code:",a);let s=i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");C(s);}finally{L(false);}},"highlightCode")();},[i,d,c]);let T=t.useCallback(async()=>{try{await navigator.clipboard.writeText(i),H(!0),setTimeout(()=>H(!1),2e3);}catch(n){console.error("Failed to copy code:",n);}},[i]),M=k.split(`
+`).filter((n,a,s)=>n.trim()!==""||a<s.length-1),J=b(()=>jsx("code",{className:cn(B({variant:o,theme:c,size:p}),"font-mono",l),dangerouslySetInnerHTML:{__html:k}}),"renderInline"),K=b(()=>jsxs("div",{ref:j,className:cn(B({variant:o,theme:c,size:p}),"overflow-hidden",l),...F,children:[_&&(f||d||v||h)&&jsxs("div",{className:"flex items-center justify-between border-b px-4 py-2 bg-muted/30",children:[jsxs("div",{className:"flex items-center gap-2",children:[f&&jsxs("div",{className:"flex items-center gap-1.5",children:[jsx(FileText,{className:"h-3.5 w-3.5 text-muted-foreground"}),jsx("span",{className:"text-sm font-medium",children:f})]}),V&&d&&jsx(Badge,{variant:"secondary",className:"text-xs",children:d})]}),jsxs("div",{className:"flex items-center gap-1",children:[h&&jsxs(Button,{variant:"ghost",size:"sm",onClick:()=>O(!m),className:"h-8 w-8 p-0",children:[m?jsx(Minimize2,{className:"h-3.5 w-3.5"}):jsx(Maximize2,{className:"h-3.5 w-3.5"}),jsx("span",{className:"sr-only",children:m?"Collapse":"Expand"})]}),v&&jsxs(Button,{variant:"ghost",size:"sm",onClick:T,className:"h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",children:[y?jsx(Check,{className:"h-3.5 w-3.5 text-green-500"}):jsx(Copy,{className:"h-3.5 w-3.5"}),jsx("span",{className:"sr-only",children:y?"Copied":"Copy code"})]})]})]}),jsx("div",{className:cn("overflow-auto",!x&&"overflow-x-auto"),style:{maxHeight:m?P:A},children:q?jsx("div",{className:"p-4 space-y-2",children:Array.from({length:Math.min(M.length||5,10)}).map((n,a)=>jsxs("div",{className:"flex items-center gap-4",children:[w&&jsx(Skeleton,{className:"h-4 w-8"}),jsx(Skeleton,{className:"h-4 flex-1"})]},a))}):jsx("div",{className:"font-mono",children:M.map((n,a)=>{let s=a+D,u=z.includes(s);return jsxs("div",{className:cn("group relative flex min-h-[1.5rem] items-center px-4 py-0.5",u&&"bg-blue-500/10 border-l-2 border-l-blue-500",!x&&"whitespace-nowrap"),children:[w&&jsx("span",{className:"mr-4 inline-block w-8 select-none text-right text-xs text-muted-foreground",children:s}),jsx("div",{className:cn("flex-1",x?"whitespace-pre-wrap break-words":"overflow-x-auto"),dangerouslySetInnerHTML:{__html:n}})]},a)})})}),h&&!m&&jsx("div",{className:"absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background to-transparent pointer-events-none"}),o==="minimal"&&v&&jsx(Button,{variant:"ghost",size:"sm",onClick:T,className:"absolute top-2 right-2 h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity",children:y?jsx(Check,{className:"h-3.5 w-3.5 text-green-500"}):jsx(Copy,{className:"h-3.5 w-3.5"})})]}),"renderBlock");return o==="inline"?J():K()});I.displayName="CodeSnippet";var ae=t.forwardRef(({children:l,language:o,className:c,...p},i)=>jsx(I,{ref:i,code:l,language:o,variant:"inline",showCopyButton:false,showLanguageBadge:false,showHeader:false,className:c,...p}));ae.displayName="InlineCode";export{I as CodeSnippet,ae as InlineCode,B as codeSnippetVariants};

package/dist/code/tabs.js

@@ -1,75 +1,2 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var utils = require('@hanzo/ui/lib/utils');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-var CodeTabs = React__namespace.forwardRef(
-  ({ className, tabs = [], defaultTab = 0, ...props }, ref) => {
-    const [activeTab, setActiveTab] = React__namespace.useState(defaultTab);
-    if (tabs.length === 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref,
-          className: utils.cn(
-            "rounded-lg border bg-card p-6 text-card-foreground shadow-sm",
-            className
-          ),
-          ...props,
-          children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No code tabs available. Add tabs to display code snippets." })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: utils.cn(
-          "rounded-lg border bg-card text-card-foreground shadow-sm",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 p-2", children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => setActiveTab(index),
-              className: utils.cn(
-                "rounded-md px-4 py-2 text-sm font-medium transition-colors",
-                activeTab === index ? "bg-primary text-primary-foreground" : "hover:bg-muted"
-              ),
-              children: tab.label
-            },
-            index
-          )) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-x-auto rounded-md bg-muted p-4", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-sm", children: tabs[activeTab]?.code }) }) })
-        ]
-      }
-    );
-  }
-);
-CodeTabs.displayName = "CodeTabs";
-
-exports.CodeTabs = CodeTabs;
+'use strict';var a=require('react'),utils=require('@hanzo/ui/lib/utils'),jsxRuntime=require('react/jsx-runtime');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var a__namespace=/*#__PURE__*/_interopNamespace(a);var b=a__namespace.forwardRef(({className:o,tabs:t=[],defaultTab:m=0,...s},c)=>{let[i,l]=a__namespace.useState(m);return t.length===0?jsxRuntime.jsx("div",{ref:c,className:utils.cn("rounded-lg border bg-card p-6 text-card-foreground shadow-sm",o),...s,children:jsxRuntime.jsx("p",{className:"text-sm text-muted-foreground",children:"No code tabs available. Add tabs to display code snippets."})}):jsxRuntime.jsxs("div",{ref:c,className:utils.cn("rounded-lg border bg-card text-card-foreground shadow-sm",o),...s,children:[jsxRuntime.jsx("div",{className:"border-b",children:jsxRuntime.jsx("div",{className:"flex gap-1 p-2",children:t.map((n,d)=>jsxRuntime.jsx("button",{onClick:()=>l(d),className:utils.cn("rounded-md px-4 py-2 text-sm font-medium transition-colors",i===d?"bg-primary text-primary-foreground":"hover:bg-muted"),children:n.label},d))})}),jsxRuntime.jsx("div",{className:"p-4",children:jsxRuntime.jsx("pre",{className:"overflow-x-auto rounded-md bg-muted p-4",children:jsxRuntime.jsx("code",{className:"text-sm",children:t[i]?.code})})})]})});b.displayName="CodeTabs";exports.CodeTabs=b;

package/dist/code/tabs.mjs

@@ -1,53 +1,2 @@
 "use client";
-import * as React from 'react';
-import { cn } from '@hanzo/ui/lib/utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var CodeTabs = React.forwardRef(
-  ({ className, tabs = [], defaultTab = 0, ...props }, ref) => {
-    const [activeTab, setActiveTab] = React.useState(defaultTab);
-    if (tabs.length === 0) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref,
-          className: cn(
-            "rounded-lg border bg-card p-6 text-card-foreground shadow-sm",
-            className
-          ),
-          ...props,
-          children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No code tabs available. Add tabs to display code snippets." })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "rounded-lg border bg-card text-card-foreground shadow-sm",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "border-b", children: /* @__PURE__ */ jsx("div", { className: "flex gap-1 p-2", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setActiveTab(index),
-              className: cn(
-                "rounded-md px-4 py-2 text-sm font-medium transition-colors",
-                activeTab === index ? "bg-primary text-primary-foreground" : "hover:bg-muted"
-              ),
-              children: tab.label
-            },
-            index
-          )) }) }),
-          /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-md bg-muted p-4", children: /* @__PURE__ */ jsx("code", { className: "text-sm", children: tabs[activeTab]?.code }) }) })
-        ]
-      }
-    );
-  }
-);
-CodeTabs.displayName = "CodeTabs";
-
-export { CodeTabs };
+import*as a from'react';import {cn}from'@hanzo/ui/lib/utils';import {jsx,jsxs}from'react/jsx-runtime';var b=a.forwardRef(({className:o,tabs:t=[],defaultTab:m=0,...s},c)=>{let[i,l]=a.useState(m);return t.length===0?jsx("div",{ref:c,className:cn("rounded-lg border bg-card p-6 text-card-foreground shadow-sm",o),...s,children:jsx("p",{className:"text-sm text-muted-foreground",children:"No code tabs available. Add tabs to display code snippets."})}):jsxs("div",{ref:c,className:cn("rounded-lg border bg-card text-card-foreground shadow-sm",o),...s,children:[jsx("div",{className:"border-b",children:jsx("div",{className:"flex gap-1 p-2",children:t.map((n,d)=>jsx("button",{onClick:()=>l(d),className:cn("rounded-md px-4 py-2 text-sm font-medium transition-colors",i===d?"bg-primary text-primary-foreground":"hover:bg-muted"),children:n.label},d))})}),jsx("div",{className:"p-4",children:jsx("pre",{className:"overflow-x-auto rounded-md bg-muted p-4",children:jsx("code",{className:"text-sm",children:t[i]?.code})})})]})});b.displayName="CodeTabs";export{b as CodeTabs};