@seedgrid/fe-components 0.2.7 → 0.2.8

package/dist/gadgets/clock/SgClock.js

@@ -318,46 +318,46 @@ function DigitalClock({ timezone, locale = "pt-BR", format = "24h", showSeconds
         const glossBottom = "after:absolute after:inset-0 after:bg-gradient-to-t after:from-black/30 after:to-transparent after:content-['']";
         const Colon = () => (_jsxs("div", { className: "flex flex-col items-center justify-center", style: { height: h }, children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-white/80" }), _jsx("div", { className: "mt-2 h-2 w-2 rounded-full bg-white/80" })] }));
         const PeriodCell = ({ value }) => (_jsx("div", { className: cn(panel, glossTop, glossBottom, "flex items-center justify-center"), style: { width: Math.round(w * 1.35), height: h }, children: _jsx("span", { className: "font-semibold text-white/90", style: { fontSize: Math.round(sizePx * 1.05), lineHeight: 1 }, children: value }) }));
-        return (_jsxs("div", { className: cn("flex items-center gap-2", className), "aria-label": "Digital clock", children: [_jsx("style", { children: `
-          .flip-top {
-            background: #1a1a1a;
-            border-radius: 8px 8px 0 0;
-            animation: sgFlipTop 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
-            backface-visibility: hidden;
-            transform-style: preserve-3d;
-            will-change: transform;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
-          }
-          .flip-bottom {
-            background: #1a1a1a;
-            border-radius: 0 0 8px 8px;
-            animation: sgFlipBottom 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
-            animation-delay: 0.6s;
-            backface-visibility: hidden;
-            transform-style: preserve-3d;
-            will-change: transform;
-            box-shadow: 0 -2px 8px rgba(0,0,0,0.3), inset 0 2px 4px rgba(0,0,0,0.2);
-          }
-          @keyframes sgFlipTop {
-            0% {
-              transform: rotateX(0deg);
-              z-index: 30;
-            }
-            100% {
-              transform: rotateX(-180deg);
-              z-index: 5;
-            }
-          }
-          @keyframes sgFlipBottom {
-            0% {
-              transform: rotateX(180deg);
-              z-index: 5;
-            }
-            100% {
-              transform: rotateX(0deg);
-              z-index: 30;
-            }
-          }
+        return (_jsxs("div", { className: cn("flex items-center gap-2", className), "aria-label": "Digital clock", children: [_jsx("style", { children: `
+          .flip-top {
+            background: #1a1a1a;
+            border-radius: 8px 8px 0 0;
+            animation: sgFlipTop 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
+            backface-visibility: hidden;
+            transform-style: preserve-3d;
+            will-change: transform;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
+          }
+          .flip-bottom {
+            background: #1a1a1a;
+            border-radius: 0 0 8px 8px;
+            animation: sgFlipBottom 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) both;
+            animation-delay: 0.6s;
+            backface-visibility: hidden;
+            transform-style: preserve-3d;
+            will-change: transform;
+            box-shadow: 0 -2px 8px rgba(0,0,0,0.3), inset 0 2px 4px rgba(0,0,0,0.2);
+          }
+          @keyframes sgFlipTop {
+            0% {
+              transform: rotateX(0deg);
+              z-index: 30;
+            }
+            100% {
+              transform: rotateX(-180deg);
+              z-index: 5;
+            }
+          }
+          @keyframes sgFlipBottom {
+            0% {
+              transform: rotateX(180deg);
+              z-index: 5;
+            }
+            100% {
+              transform: rotateX(0deg);
+              z-index: 30;
+            }
+          }
         ` }), _jsx(FlipDigitCard, { ch: hh.charAt(0), w: w, h: h, digitFont: digitFont }), _jsx(FlipDigitCard, { ch: hh.charAt(1), w: w, h: h, digitFont: digitFont }), _jsx(Colon, {}), _jsx(FlipDigitCard, { ch: mm.charAt(0), w: w, h: h, digitFont: digitFont }), _jsx(FlipDigitCard, { ch: mm.charAt(1), w: w, h: h, digitFont: digitFont }), showSeconds ? (_jsxs(_Fragment, { children: [_jsx(Colon, {}), _jsx(FlipDigitCard, { ch: ss.charAt(0), w: w, h: h, digitFont: digitFont }), _jsx(FlipDigitCard, { ch: ss.charAt(1), w: w, h: h, digitFont: digitFont })] })) : null, format === "12h" && dayPeriod ? _jsx(PeriodCell, { value: dayPeriod.toUpperCase() }) : null] }));
     }
     if (digitalStyle === "roller3d") {

package/dist/index.d.ts

@@ -61,6 +61,8 @@ export { SgStack } from "./layout/SgStack";
 export type { SgStackProps } from "./layout/SgStack";
 export { SgCard } from "./layout/SgCard";
 export type { SgCardProps, SgCardVariant, SgCardSize } from "./layout/SgCard";
+export { default as SgPlayground } from "./others/SgPlayground";
+export type { SgPlaygroundProps } from "./others/SgPlayground";
 export { SgToolBar, SgToolbarIconButton } from "./layout/SgToolBar";
 export type { SgToolBarProps, SgToolBarOrientation, SgToolBarSeverity, SgToolBarSize, SgToolbarIconButtonProps } from "./layout/SgToolBar";
 export { SgDockLayout } from "./layout/SgDockLayout";

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -32,6 +32,7 @@ export { SgPanel } from "./layout/SgPanel";
 export { SgGrid } from "./layout/SgGrid";
 export { SgStack } from "./layout/SgStack";
 export { SgCard } from "./layout/SgCard";
+export { default as SgPlayground } from "./others/SgPlayground";
 export { SgToolBar, SgToolbarIconButton } from "./layout/SgToolBar";
 export { SgDockLayout } from "./layout/SgDockLayout";
 export { SgDockZone } from "./layout/SgDockZone";

package/dist/others/SgPlayground.d.ts

@@ -0,0 +1,24 @@
+export type SgPlaygroundProps = {
+    code: string;
+    interactive?: boolean;
+    codeContract?: "renderBody" | "appFile";
+    title?: string;
+    description?: string;
+    height?: number | string;
+    expandedHeight?: number | string;
+    expandable?: boolean;
+    resizable?: boolean;
+    resizeAxis?: "vertical" | "horizontal" | "both";
+    previewPadding?: number | string;
+    className?: string;
+    dependencies?: Record<string, string>;
+    defaultImports?: string;
+    previewWrapperClassName?: string;
+    seedgridDependency?: string;
+    withCard?: boolean;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    cardId?: string;
+};
+export default function SgPlayground(props: Readonly<SgPlaygroundProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgPlayground.d.ts.map

package/dist/others/SgPlayground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAoVF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoMtE"}

package/dist/others/SgPlayground.js

@@ -0,0 +1,388 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { SandpackCodeEditor, SandpackPreview, SandpackProvider, useSandpack } from "@codesandbox/sandpack-react";
+import { SgButton } from "../buttons/SgButton";
+import { SgCard } from "../layout/SgCard";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+const DEFAULT_SEEDGRID_DEPENDENCY = "0.2.6";
+const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
+    "react-hook-form": "^7.0.0",
+    "lucide-react": "^0.468.0",
+    "@tiptap/react": "^2.9.1",
+    "@tiptap/starter-kit": "^2.9.1",
+    "@tiptap/extension-underline": "^2.9.1",
+    "@tiptap/extension-link": "^2.9.1",
+    "@tiptap/extension-image": "^2.9.1",
+    "@tiptap/extension-text-align": "^2.9.1",
+    "@tiptap/extension-text-style": "^2.9.1",
+    "@tiptap/extension-color": "^2.9.1",
+    "@tiptap/extension-highlight": "^2.9.1",
+    "@tiptap/extension-subscript": "^2.9.1",
+    "@tiptap/extension-superscript": "^2.9.1",
+    "@tiptap/extension-font-family": "^2.9.1"
+};
+const SANDPACK_EXTERNAL_RESOURCES = [
+    // Prebuilt utility CSS so classes from @seedgrid/fe-components can render inside Sandpack
+    "https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"
+];
+const SANDPACK_FALLBACK_THEME_VARS = {
+    "--background": "0 0% 100%",
+    "--foreground": "222.2 84% 4.9%",
+    "--primary": "142 76% 36%",
+    "--primary-foreground": "0 0% 100%",
+    "--secondary": "210 40% 96.1%",
+    "--secondary-foreground": "222.2 47.4% 11.2%",
+    "--accent": "152 57% 40%",
+    "--accent-foreground": "0 0% 100%",
+    "--destructive": "0 84.2% 60.2%",
+    "--destructive-foreground": "0 0% 100%",
+    "--border": "214.3 31.8% 91.4%",
+    "--ring": "var(--primary)",
+    "--sg-primary-600": "22 163 74",
+    "--sg-secondary-600": "82 82 91",
+    "--sg-tertiary-600": "20 184 166",
+    "--sg-error-600": "220 38 38",
+    "--sg-warning-600": "217 119 6",
+    "--sg-info-600": "2 132 199",
+    "--sg-success-600": "22 163 74"
+};
+const SANDPACK_CORE_THEME_VARS = [
+    "--background",
+    "--foreground",
+    "--primary",
+    "--primary-foreground",
+    "--secondary",
+    "--secondary-foreground",
+    "--accent",
+    "--accent-foreground",
+    "--destructive",
+    "--destructive-foreground",
+    "--border",
+    "--ring"
+];
+const SANDPACK_BASE_STYLES_CSS = `* {
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  margin: 0;
+  min-height: 100%;
+}
+
+#root {
+  padding: var(--sg-preview-padding, 0px);
+}
+
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  background: rgb(var(--sg-bg, 255 255 255));
+  color: rgb(var(--sg-text, 11 11 12));
+}
+
+/* Classes with arbitrary values used by SeedGrid components */
+.bg-\\[var\\(--sg-btn-bg\\)\\] { background-color: var(--sg-btn-bg); }
+.text-\\[var\\(--sg-btn-fg\\)\\] { color: var(--sg-btn-fg); }
+.border-\\[var\\(--sg-btn-border\\)\\] { border-color: var(--sg-btn-border); }
+.hover\\:bg-\\[var\\(--sg-btn-hover-bg\\)\\]:hover { background-color: var(--sg-btn-hover-bg); }
+.hover\\:text-\\[var\\(--sg-btn-hover-fg\\)\\]:hover { color: var(--sg-btn-hover-fg); }
+.hover\\:border-\\[var\\(--sg-btn-hover-border\\)\\]:hover { border-color: var(--sg-btn-hover-border); }
+.active\\:bg-\\[var\\(--sg-btn-active-bg\\)\\]:active { background-color: var(--sg-btn-active-bg); }
+.focus-visible\\:ring-\\[var\\(--sg-btn-ring\\)\\]:focus-visible { box-shadow: 0 0 0 4px var(--sg-btn-ring); }
+.hover\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.12\\)\\]:hover { background-color: rgb(var(--sg-btn-tint) / 0.12); }
+.active\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.18\\)\\]:active { background-color: rgb(var(--sg-btn-tint) / 0.18); }
+.hover\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.10\\)\\]:hover { background-color: rgb(var(--sg-btn-tint) / 0.10); }
+.active\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.16\\)\\]:active { background-color: rgb(var(--sg-btn-tint) / 0.16); }
+.transition-\\[background-color\\,color\\,border-color\\,box-shadow\\,transform\\] {
+  transition-property: background-color, color, border-color, box-shadow, transform;
+}
+.active\\:translate-y-\\[0\\.5px\\]:active { transform: translateY(0.5px); }
+.size-4 { width: 1rem; height: 1rem; }
+.size-5 { width: 1.25rem; height: 1.25rem; }
+`;
+function parseRgbParts(raw) {
+    const value = raw.trim();
+    if (!value)
+        return null;
+    const normalized = value
+        .replace(/^rgb\(/i, "")
+        .replace(/\)$/g, "")
+        .replace(/\//g, " ")
+        .replace(/,/g, " ")
+        .trim();
+    const pieces = normalized
+        .split(/\s+/)
+        .map((part) => Number(part))
+        .filter((num) => Number.isFinite(num));
+    if (pieces.length < 3)
+        return null;
+    const r = pieces[0];
+    const g = pieces[1];
+    const b = pieces[2];
+    const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+    return [clamp(r), clamp(g), clamp(b)];
+}
+function rgbToHslTriplet(r, g, b) {
+    const rr = r / 255;
+    const gg = g / 255;
+    const bb = b / 255;
+    const max = Math.max(rr, gg, bb);
+    const min = Math.min(rr, gg, bb);
+    const delta = max - min;
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (delta !== 0) {
+        s = delta / (1 - Math.abs(2 * l - 1));
+        switch (max) {
+            case rr:
+                h = ((gg - bb) / delta + (gg < bb ? 6 : 0)) / 6;
+                break;
+            case gg:
+                h = ((bb - rr) / delta + 2) / 6;
+                break;
+            default:
+                h = ((rr - gg) / delta + 4) / 6;
+                break;
+        }
+    }
+    const hue = Math.round(h * 360);
+    const sat = Math.round(s * 100);
+    const lig = Math.round(l * 100);
+    return `${hue} ${sat}% ${lig}%`;
+}
+function toHslFromRgbVar(value) {
+    if (!value)
+        return null;
+    const parts = parseRgbParts(value);
+    if (!parts)
+        return null;
+    return rgbToHslTriplet(parts[0], parts[1], parts[2]);
+}
+function mapSgVarsToCoreVars(themeVars) {
+    const mapped = {};
+    const assignFromSg = (coreVar, sgVar) => {
+        const hsl = toHslFromRgbVar(themeVars[sgVar]);
+        if (hsl)
+            mapped[coreVar] = hsl;
+    };
+    assignFromSg("--background", "--sg-bg");
+    assignFromSg("--foreground", "--sg-text");
+    assignFromSg("--primary", "--sg-primary-600");
+    assignFromSg("--primary-foreground", "--sg-on-primary");
+    assignFromSg("--secondary", "--sg-secondary-600");
+    assignFromSg("--secondary-foreground", "--sg-on-secondary");
+    assignFromSg("--accent", "--sg-tertiary-600");
+    assignFromSg("--accent-foreground", "--sg-on-tertiary");
+    assignFromSg("--destructive", "--sg-error-600");
+    assignFromSg("--destructive-foreground", "--sg-on-error");
+    assignFromSg("--border", "--sg-border");
+    assignFromSg("--ring", "--sg-primary-400");
+    return mapped;
+}
+function readThemeVarsFromHost() {
+    if (typeof window === "undefined")
+        return {};
+    const computed = window.getComputedStyle(document.documentElement);
+    const themeVars = {};
+    for (const varName of SANDPACK_CORE_THEME_VARS) {
+        const value = computed.getPropertyValue(varName).trim();
+        if (value)
+            themeVars[varName] = value;
+    }
+    for (let index = 0; index < computed.length; index += 1) {
+        const varName = computed.item(index)?.trim();
+        if (!varName || !varName.startsWith("--sg-"))
+            continue;
+        const value = computed.getPropertyValue(varName).trim();
+        if (value)
+            themeVars[varName] = value;
+    }
+    Object.assign(themeVars, mapSgVarsToCoreVars(themeVars));
+    return themeVars;
+}
+function normalizeCssSize(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+function buildSandpackStylesCss(themeVars, previewPadding) {
+    const mergedVars = {
+        ...SANDPACK_FALLBACK_THEME_VARS,
+        ...themeVars,
+        "--sg-preview-padding": previewPadding
+    };
+    const rootVars = Object.entries(mergedVars)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([varName, value]) => `  ${varName}: ${value};`)
+        .join("\n");
+    return `:root {
+${rootVars}
+}
+
+${SANDPACK_BASE_STYLES_CSS}`;
+}
+function ReadonlyBlock({ code }) {
+    return (_jsx("pre", { className: "overflow-auto rounded-lg border border-border bg-muted/30 p-4 text-xs leading-relaxed", children: _jsx("code", { children: code }) }));
+}
+function buildAppTsxFromRenderBody(renderBody, defaultImports, wrapperClassName) {
+    const body = renderBody
+        .replace(/\t/g, "  ")
+        .split("\n")
+        .map((line) => (line ? `        ${line}` : ""))
+        .join("\n");
+    if (!wrapperClassName) {
+        return `import * as React from "react";
+${defaultImports}
+
+export default function App() {
+  return (
+    <>
+${body}
+    </>
+  );
+}
+`;
+    }
+    return `import * as React from "react";
+${defaultImports}
+
+export default function App() {
+  return (
+    <div className="${wrapperClassName}">
+      <>
+${body}
+      </>
+    </div>
+  );
+}
+`;
+}
+async function copyText(text) {
+    if (!text)
+        return false;
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    if (typeof document === "undefined")
+        return false;
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return ok;
+}
+function CopyButton() {
+    const { sandpack } = useSandpack();
+    const [copyState, setCopyState] = React.useState("idle");
+    const handleCopy = React.useCallback(async () => {
+        try {
+            const activeFilePath = sandpack.activeFile;
+            const activeCode = sandpack.files[activeFilePath]?.code ?? "";
+            const copied = await copyText(activeCode);
+            setCopyState(copied ? "success" : "error");
+        }
+        catch {
+            setCopyState("error");
+        }
+    }, [sandpack.activeFile, sandpack.files]);
+    React.useEffect(() => {
+        if (copyState === "idle")
+            return;
+        const timerId = window.setTimeout(() => setCopyState("idle"), 1400);
+        return () => window.clearTimeout(timerId);
+    }, [copyState]);
+    return (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: handleCopy, children: copyState === "success" ? "Copiado" : copyState === "error" ? "Erro" : "Copiar" }));
+}
+function RunButton() {
+    const { sandpack } = useSandpack();
+    return (_jsx(SgButton, { severity: "primary", size: "sm", onClick: () => sandpack.runSandpack(), children: "Run" }));
+}
+export default function SgPlayground(props) {
+    const { code, interactive = false, codeContract = "renderBody", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, dependencies, defaultImports, previewWrapperClassName = "h-[420px] rounded-xl border border-border bg-muted/30 p-3", seedgridDependency, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
+    const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
+    const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss(readThemeVarsFromHost(), effectivePreviewPadding));
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    React.useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const root = document.documentElement;
+        const refreshStyles = () => {
+            const liveThemeVars = readThemeVarsFromHost();
+            setSandpackStylesCss(buildSandpackStylesCss(liveThemeVars, effectivePreviewPadding));
+        };
+        let frameId = null;
+        const scheduleRefresh = () => {
+            if (frameId !== null)
+                return;
+            frameId = window.requestAnimationFrame(() => {
+                frameId = null;
+                refreshStyles();
+            });
+        };
+        const observer = new MutationObserver(scheduleRefresh);
+        observer.observe(root, {
+            attributes: true,
+            attributeFilter: ["style", "class", "data-theme"]
+        });
+        refreshStyles();
+        return () => {
+            observer.disconnect();
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+        };
+    }, [effectivePreviewPadding]);
+    const seedgridDefaultImports = defaultImports ?? `import {
+  SgScreen,
+  SgMainPanel,
+  SgPanel,
+  SgGrid,
+  SgStack,
+  SgButton,
+  SgAutocomplete
+} from "@seedgrid/fe-components";`;
+    const appTsx = codeContract === "appFile"
+        ? code
+        : buildAppTsxFromRenderBody(code, seedgridDefaultImports, previewWrapperClassName);
+    const resolvedSeedgridDependency = seedgridDependency ??
+        process.env.NEXT_PUBLIC_SANDPACK_SEEDGRID_DEPENDENCY ??
+        DEFAULT_SEEDGRID_DEPENDENCY;
+    const files = {
+        "/App.tsx": { code: appTsx, active: true },
+        "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) }
+    };
+    const deps = {
+        react: "^19.0.0",
+        "react-dom": "^19.0.0",
+        ...DEFAULT_SEEDGRID_PEER_DEPENDENCIES,
+        "@seedgrid/fe-components": resolvedSeedgridDependency,
+        ...(dependencies ?? {})
+    };
+    const currentHeight = isExpanded ? expandedHeight : height;
+    const resizeClass = !resizable
+        ? undefined
+        : resizeAxis === "vertical"
+            ? "resize-y"
+            : resizeAxis === "horizontal"
+                ? "resize-x"
+                : "resize";
+    const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: { dependencies: deps }, options: {
+                autorun: false,
+                activeFile: "/App.tsx",
+                visibleFiles: ["/App.tsx"],
+                externalResources: SANDPACK_EXTERNAL_RESOURCES
+            }, children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [withCard ? null : _jsx("span", { className: "text-sm font-medium", children: title ?? "Example" }), _jsx("span", { className: "text-xs text-muted-foreground", children: codeContract === "renderBody" ? "editable snippet" : "editable App.tsx" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [expandable ? (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: () => setIsExpanded((prev) => !prev), children: isExpanded ? "Reduzir" : "Expandir" })) : null, _jsx(RunButton, {})] })] }), _jsxs("div", { className: cn("grid overflow-auto min-h-[260px] min-w-[480px]", resizeClass), style: {
+                        gridTemplateColumns: "1fr 1fr",
+                        height: currentHeight
+                    }, children: [_jsxs("div", { className: "min-w-0 border-r border-border", children: [_jsx(SandpackCodeEditor, { showLineNumbers: true, wrapContent: true, showTabs: false, showRunButton: false, style: { height: "100%" } }), _jsx("div", { className: "flex justify-end border-t border-border px-3 py-2", children: _jsx(CopyButton, {}) })] }), _jsx("div", { className: "min-w-0", children: _jsx(SandpackPreview, { style: { height: "100%" }, showOpenInCodeSandbox: false, showRefreshButton: false, showRestartButton: false }) })] })] }) })) : (_jsxs("div", { className: cn(withCard ? undefined : "space-y-2", withCard ? undefined : className), children: [withCard ? null : title ? _jsx("div", { className: "text-sm font-medium", children: title }) : null, _jsx(ReadonlyBlock, { code: code })] }));
+    if (!withCard)
+        return content;
+    return (_jsx(SgCard, { id: cardId, title: title ?? "Codigo", description: description, collapsible: collapsible, defaultOpen: defaultOpen, className: cn("rounded-lg", className), bodyClassName: "p-0", children: content }));
+}

package/package.json

@@ -1,54 +1,57 @@
-{
-  "name": "@seedgrid/fe-components",
-  "version": "0.2.7",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
-    "build": "pnpm run clean && tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0",
-    "react-hook-form": "^7.0.0",
-    "lucide-react": "^0.468.0",
-    "@tiptap/react": "^2.9.1",
-    "@tiptap/starter-kit": "^2.9.1",
-    "@tiptap/extension-underline": "^2.9.1",
-    "@tiptap/extension-link": "^2.9.1",
-    "@tiptap/extension-image": "^2.9.1",
-    "@tiptap/extension-text-align": "^2.9.1",
-    "@tiptap/extension-text-style": "^2.9.1",
-    "@tiptap/extension-color": "^2.9.1",
-    "@tiptap/extension-highlight": "^2.9.1",
-    "@tiptap/extension-subscript": "^2.9.1",
-    "@tiptap/extension-superscript": "^2.9.1",
-    "@tiptap/extension-font-family": "^2.9.1"
-  },
-  "devDependencies": {
-    "react-hook-form": "^7.0.0",
-    "lucide-react": "^0.468.0",
-    "@tiptap/react": "^2.9.1",
-    "@tiptap/starter-kit": "^2.9.1",
-    "@tiptap/extension-underline": "^2.9.1",
-    "@tiptap/extension-link": "^2.9.1",
-    "@tiptap/extension-image": "^2.9.1",
-    "@tiptap/extension-text-align": "^2.9.1",
-    "@tiptap/extension-text-style": "^2.9.1",
-    "@tiptap/extension-color": "^2.9.1",
-    "@tiptap/extension-highlight": "^2.9.1",
-    "@tiptap/extension-subscript": "^2.9.1",
-    "@tiptap/extension-superscript": "^2.9.1",
-    "@tiptap/extension-font-family": "^2.9.1"
-  }
-}
+{
+  "name": "@seedgrid/fe-components",
+  "version": "0.2.8",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "pnpm run clean && tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-hook-form": "^7.0.0",
+    "@codesandbox/sandpack-react": "^2.20.0",
+    "lucide-react": "^0.468.0",
+    "@tiptap/react": "^2.9.1",
+    "@tiptap/starter-kit": "^2.9.1",
+    "@tiptap/extension-underline": "^2.9.1",
+    "@tiptap/extension-link": "^2.9.1",
+    "@tiptap/extension-image": "^2.9.1",
+    "@tiptap/extension-text-align": "^2.9.1",
+    "@tiptap/extension-text-style": "^2.9.1",
+    "@tiptap/extension-color": "^2.9.1",
+    "@tiptap/extension-highlight": "^2.9.1",
+    "@tiptap/extension-subscript": "^2.9.1",
+    "@tiptap/extension-superscript": "^2.9.1",
+    "@tiptap/extension-font-family": "^2.9.1"
+  },
+  "devDependencies": {
+    "react-hook-form": "^7.0.0",
+    "@codesandbox/sandpack-react": "^2.20.0",
+    "lucide-react": "^0.468.0",
+    "@tiptap/react": "^2.9.1",
+    "@tiptap/starter-kit": "^2.9.1",
+    "@tiptap/extension-underline": "^2.9.1",
+    "@tiptap/extension-link": "^2.9.1",
+    "@tiptap/extension-image": "^2.9.1",
+    "@tiptap/extension-text-align": "^2.9.1",
+    "@tiptap/extension-text-style": "^2.9.1",
+    "@tiptap/extension-color": "^2.9.1",
+    "@tiptap/extension-highlight": "^2.9.1",
+    "@tiptap/extension-subscript": "^2.9.1",
+    "@tiptap/extension-superscript": "^2.9.1",
+    "@tiptap/extension-font-family": "^2.9.1"
+  }
+}