@hanzo/ui 5.3.28 → 5.3.29

package/dist/code/snippet.mjs

@@ -0,0 +1,250 @@
+"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 };

package/dist/code/tabs.js

@@ -0,0 +1,75 @@
+"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;

package/dist/code/tabs.mjs

@@ -0,0 +1,53 @@
+"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 };