@sampleapp.ai/sdk 1.0.28 → 1.0.30

package/dist/components/sandbox/guardian/ui/markdown/callout/shared/callout.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { cn } from "../../../../../../../lib/utils";
+import { Markdown } from "../../../markdown";
+export const Callout = ({ children, className, icon }) => {
+    return (React.createElement("div", { className: cn("my-4 flex items-start gap-4 rounded-md border bg-opacity-10 p-4", className) },
+        icon && React.createElement("div", { className: "mt-0.5 flex-shrink-0" }, icon),
+        React.createElement("div", null,
+            React.createElement(Markdown, null, children))));
+};

package/dist/components/sandbox/guardian/ui/markdown/callout/shared/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/sandbox/guardian/ui/markdown/card-group/card.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { cn } from "../../../../../../lib/utils";
+import * as LucideIcons from "lucide-react";
+export const Card = ({ title, children, icon, href, img, horizontal = false, className, }) => {
+    const IconComponent = icon
+        ? LucideIcons[icon]
+        : null;
+    const CardContent = () => (React.createElement(React.Fragment, null,
+        img && (React.createElement("div", { className: "overflow-hidden rounded-t-lg" },
+            React.createElement("img", { src: img, alt: title, className: "aspect-[2/1] w-full object-cover" }))),
+        React.createElement("div", { className: cn("flex flex-col space-y-2", horizontal ? "flex-row items-start space-x-4 space-y-0" : "", img ? "p-4" : "p-6") },
+            React.createElement("div", { className: "flex-1" },
+                IconComponent && (React.createElement(IconComponent, { className: "mb-2 h-5 w-5 text-[#0066FF] dark:text-[#66A3FF]" })),
+                React.createElement("h3", { className: "font-bold text-zinc-900 dark:text-zinc-100" }, title),
+                React.createElement("p", { className: "mt-2 text-zinc-600 dark:text-zinc-400" }, children)))));
+    return (React.createElement("div", { className: cn("group relative rounded-lg border border-zinc-200 bg-white transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-950", className) }, href ? (React.createElement("a", { href: href, className: "flex h-full flex-col", target: "_blank", rel: "noopener noreferrer" },
+        React.createElement(CardContent, null))) : (React.createElement(CardContent, null))));
+};

package/dist/components/sandbox/guardian/ui/markdown/card-group.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { cn } from "../../../../../lib/utils";
+//TODO: Fix the bug on not being able to display different number of columns
+export const CardGroup = ({ children, cols = 2, className, }) => {
+    // Helper function to get the correct column classes
+    const getColumnClass = () => {
+        switch (cols) {
+            case 1:
+                return "grid-cols-1";
+            case 2:
+                return "grid-cols-1 sm:grid-cols-2";
+            case 3:
+                return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
+            case 4:
+                return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
+            case 5:
+                return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5";
+            case 6:
+                return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-6";
+            default:
+                return "grid-cols-1 sm:grid-cols-2";
+        }
+    };
+    return (React.createElement("div", { className: cn("grid gap-4", getColumnClass(), className) }, children));
+};

package/dist/components/sandbox/guardian/ui/markdown/code-group/code-block.js

@@ -0,0 +1,87 @@
+import React from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { cn } from "../../../../../../lib/utils";
+import { Copy } from "lucide-react";
+export const CodeBlock = ({ language, value, title, className, children, isInsideCodeGroup = false, }) => {
+    // const {theme} = useTheme();
+    // const isDark = theme === "dark";
+    const isDark = true;
+    const [copied, setCopied] = React.useState(false);
+    const lightTheme = {
+        'code[class*="language-"]': {
+            color: "#1F2937",
+            background: "transparent",
+        },
+        'pre[class*="language-"]': {
+            background: "transparent",
+        },
+        keyword: {
+            color: "#D92D20",
+        },
+        string: {
+            color: "#027A48",
+        },
+        constant: {
+            color: "#1F2937",
+        },
+    };
+    const darkTheme = {
+        'code[class*="language-"]': {
+            color: "#E5E7EB",
+            background: "transparent",
+        },
+        'pre[class*="language-"]': {
+            background: "transparent",
+        },
+        keyword: {
+            color: "#FF6B6B",
+        },
+        string: {
+            color: "#34D399",
+        },
+        constant: {
+            color: "#E5E7EB",
+        },
+    };
+    let code = value;
+    if (typeof children === "string") {
+        code = children;
+    }
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(code || "");
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error("Failed to copy code:", err);
+        }
+    };
+    // If inside CodeGroup, render just the code content
+    if (isInsideCodeGroup) {
+        return (React.createElement("div", { className: "group relative overflow-x-auto" },
+            React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? darkTheme : lightTheme, customStyle: {
+                    margin: 0,
+                    padding: "1rem 1.25rem",
+                    background: "transparent",
+                    fontSize: "0.875rem",
+                    lineHeight: "1.5rem",
+                }, showLineNumbers: false, wrapLines: true }, code || "")));
+    }
+    // Standalone code block with title
+    return (React.createElement("div", { className: cn("relative rounded-lg border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-950", className) },
+        title && (React.createElement("div", { className: "flex items-center justify-between px-4 py-2 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50/80 dark:bg-zinc-900/80" },
+            React.createElement("span", { className: "text-sm text-[var(--colors-primary)] font-medium" }, language || title),
+            React.createElement("button", { onClick: handleCopy, className: cn("p-1 transition-colors", copied
+                    ? "text-green-500 dark:text-green-400"
+                    : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200"), "aria-label": "Copy code" },
+                React.createElement(Copy, { className: "h-4 w-4" })))),
+        React.createElement("div", { className: "px-4 py-3 overflow-x-auto" },
+            React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? darkTheme : lightTheme, customStyle: {
+                    margin: 0,
+                    padding: 0,
+                    background: "transparent",
+                    fontSize: "0.875rem",
+                    lineHeight: "1.5rem",
+                }, showLineNumbers: false, wrapLines: true }, code || ""))));
+};

package/dist/components/sandbox/guardian/ui/markdown/code-group.js

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { Copy } from "lucide-react";
+import { cn } from "../../../../../lib/utils";
+import { CodeBlock } from "./code-group/code-block";
+export const CodeGroup = ({ children }) => {
+    const [activeTab, setActiveTab] = useState(0);
+    const [copied, setCopied] = useState(false);
+    const parseCodeBlock = (element) => {
+        if (!element || !element.props) {
+            console.warn("Invalid code block element");
+            return null;
+        }
+        try {
+            // Handle both direct string content and nested code elements
+            let codeElement = null;
+            let content = "";
+            if (typeof element.props.children === "string") {
+                content = element.props.children.trim();
+                // Use the pre element's className if available
+                const classNameRaw = element.props.className || "";
+                const parts = classNameRaw.replace(/^language-/, "").split(" ");
+                const language = parts[0] || "plain";
+                const title = parts.slice(1).join(" ") || language;
+                return { language, title, content };
+            }
+            // Handle nested code element
+            if (Array.isArray(element.props.children)) {
+                const codeChild = element.props.children.find((child) => React.isValidElement(child) &&
+                    (child.type === "code" || typeof child.type === "string"));
+                if (codeChild) {
+                    codeElement = codeChild;
+                }
+            }
+            else if (React.isValidElement(element.props.children)) {
+                codeElement = element.props.children;
+            }
+            if (!codeElement || !codeElement.props) {
+                console.warn("No valid code element found");
+                return null;
+            }
+            const classNameRaw = codeElement.props.className || "";
+            const parts = classNameRaw.replace(/^language-/, "").split(" ");
+            const language = parts[0] || "plain";
+            const title = parts.slice(1).join(" ") || language;
+            // Handle different content structures
+            if (typeof codeElement.props.children === "string") {
+                content = codeElement.props.children.trim();
+            }
+            else if (Array.isArray(codeElement.props.children)) {
+                content = codeElement.props.children
+                    .map((child) => {
+                    var _a;
+                    return typeof child === "string"
+                        ? child
+                        : React.isValidElement(child)
+                            ? ((_a = child.props.children) === null || _a === void 0 ? void 0 : _a.toString()) || ""
+                            : "";
+                })
+                    .join("")
+                    .trim();
+            }
+            return { language, title, content };
+        }
+        catch (error) {
+            console.error("Failed to parse code block:", error);
+            return null;
+        }
+    };
+    const validChildren = Array.isArray(children) ? children : [children];
+    const blocks = validChildren
+        .filter((child) => React.isValidElement(child) &&
+        (child.type === "pre" || typeof child.type === "string"))
+        .map(parseCodeBlock)
+        .filter((block) => block !== null);
+    if (blocks.length === 0) {
+        console.warn("No valid code blocks found");
+        return null;
+    }
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(blocks[activeTab].content);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error("Failed to copy code:", err);
+        }
+    };
+    return (React.createElement("div", { className: "relative my-4 rounded-lg border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-950" },
+        React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-200 bg-zinc-50/80 dark:border-zinc-800 dark:bg-zinc-900/80" },
+            React.createElement("div", { className: "flex overflow-x-auto" }, blocks.map((block, index) => (React.createElement("button", { key: index, onClick: () => setActiveTab(index), className: cn("min-w-[120px] border-b-2 px-4 py-2 text-sm font-medium", "transition-all duration-200", activeTab === index
+                    ? "border-[#0066FF] text-[#0066FF] dark:border-[#66A3FF] dark:text-[#66A3FF]"
+                    : "border-transparent text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200") }, block.title)))),
+            React.createElement("div", { className: "border-l border-zinc-200 dark:border-zinc-800" },
+                React.createElement("button", { onClick: handleCopy, className: cn("p-2 transition-colors", copied
+                        ? "text-green-500 dark:text-green-400"
+                        : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200"), "aria-label": "Copy code" },
+                    React.createElement(Copy, { className: "h-4 w-4" })))),
+        React.createElement("div", { className: "group relative" }, blocks.map((block, index) => (React.createElement("div", { key: index, className: cn("relative", activeTab === index ? "block" : "hidden") },
+            React.createElement(CodeBlock, { language: block.language, value: block.content, isInsideCodeGroup: true })))))));
+};

package/dist/components/sandbox/guardian/ui/markdown/icon.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { cn } from "../../../../../lib/utils";
+import * as LucideIcons from "lucide-react";
+const Icon = ({ icon, size = 24, color = "#0066FF", strokeWidth = 2, absoluteStrokeWidth = false, className, children, }) => {
+    // Ensure `size` is always passed as a string
+    const normalizedSize = typeof size === "number" ? `${size}` : size;
+    // Fetch the appropriate icon component from LucideIcons
+    const IconComponent = icon
+        ? LucideIcons[icon]
+        : null;
+    if (!IconComponent) {
+        console.warn(`Icon "${icon}" not found or not provided`);
+        return (React.createElement("span", { className: cn("inline-block align-middle text-zinc-500 italic", className) }, `Icon "${icon}" not found`));
+    }
+    // Decide rendering behavior based on `children`
+    if (!children) {
+        // No inline text: render as standalone block-level element
+        return (React.createElement("div", { className: cn("block", className), style: {
+                lineHeight: 0, // Prevent extra spacing around the icon
+            } },
+            React.createElement(IconComponent, { size: normalizedSize, color: color, strokeWidth: strokeWidth, absoluteStrokeWidth: absoluteStrokeWidth })));
+    }
+    // Inline text exists: render as inline-flex with the text
+    return (React.createElement("span", { className: cn("inline-flex items-center align-middle gap-1", className), style: {
+            display: "inline-flex",
+            verticalAlign: "middle",
+        } },
+        React.createElement(IconComponent, { size: normalizedSize, color: color, strokeWidth: strokeWidth, absoluteStrokeWidth: absoluteStrokeWidth }),
+        React.createElement("span", null, children)));
+};
+export default Icon;