@seedgrid/fe-components 0.2.7 → 0.2.9

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

@@ -20,6 +20,8 @@ export { SgInputPhone } from "./inputs/SgInputPhone";
 export type { SgInputPhoneProps } from "./inputs/SgInputPhone";
 export { SgInputEmail } from "./inputs/SgInputEmail";
 export { SgInputPassword } from "./inputs/SgInputPassword";
+export { SgInputOTP } from "./inputs/SgInputOTP";
+export type { SgInputOTPProps, SgInputOTPRef } from "./inputs/SgInputOTP";
 export { SgInputDate } from "./inputs/SgInputDate";
 export { SgInputBirthDate } from "./inputs/SgInputBirthDate";
 export { SgAutocomplete } from "./inputs/SgAutocomplete";
@@ -61,6 +63,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

@@ -10,6 +10,7 @@ export { SgInputPostalCode } from "./inputs/SgInputPostalCode";
 export { SgInputPhone } from "./inputs/SgInputPhone";
 export { SgInputEmail } from "./inputs/SgInputEmail";
 export { SgInputPassword } from "./inputs/SgInputPassword";
+export { SgInputOTP } from "./inputs/SgInputOTP";
 export { SgInputDate } from "./inputs/SgInputDate";
 export { SgInputBirthDate } from "./inputs/SgInputBirthDate";
 export { SgAutocomplete } from "./inputs/SgAutocomplete";
@@ -32,6 +33,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/inputs/SgInputOTP.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+import type { FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
+import type { RhfFieldProps } from "../rhf";
+export type SgInputOTPRef = {
+    focus: (slotIndex?: number) => void;
+    clear: () => void;
+    getRawValue: () => string;
+    getMaskedValue: () => string;
+};
+export type SgInputOTPProps = {
+    id: string;
+    label?: string;
+    hintText?: string;
+    mask?: string;
+    value?: string;
+    defaultValue?: string;
+    error?: string;
+    className?: string;
+    groupClassName?: string;
+    slotClassName?: string;
+    separatorClassName?: string;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue"> & {
+        ref?: React.Ref<HTMLInputElement>;
+    };
+    width?: number | string;
+    enabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    requiredMessage?: string;
+    validation?: (rawValue: string, maskedValue: string) => string | null;
+    validateOnBlur?: boolean;
+    onValidation?: (message: string | null) => void;
+    onChange?: (maskedValue: string) => void;
+    onRawChange?: (rawValue: string) => void;
+    onComplete?: (value: string) => void;
+    onEnter?: () => void;
+    onExit?: () => void;
+    onClear?: () => void;
+    register?: UseFormRegister<FieldValues>;
+    rules?: RegisterOptions<FieldValues>;
+} & RhfFieldProps;
+export declare const SgInputOTP: React.ForwardRefExoticComponent<{
+    id: string;
+    label?: string;
+    hintText?: string;
+    mask?: string;
+    value?: string;
+    defaultValue?: string;
+    error?: string;
+    className?: string;
+    groupClassName?: string;
+    slotClassName?: string;
+    separatorClassName?: string;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue"> & {
+        ref?: React.Ref<HTMLInputElement>;
+    };
+    width?: number | string;
+    enabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    requiredMessage?: string;
+    validation?: (rawValue: string, maskedValue: string) => string | null;
+    validateOnBlur?: boolean;
+    onValidation?: (message: string | null) => void;
+    onChange?: (maskedValue: string) => void;
+    onRawChange?: (rawValue: string) => void;
+    onComplete?: (value: string) => void;
+    onEnter?: () => void;
+    onExit?: () => void;
+    onClear?: () => void;
+    register?: UseFormRegister<FieldValues>;
+    rules?: RegisterOptions<FieldValues>;
+} & RhfFieldProps & React.RefAttributes<SgInputOTPRef>>;
+//# sourceMappingURL=SgInputOTP.d.ts.map

package/dist/inputs/SgInputOTP.d.ts.map

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

package/dist/inputs/SgInputOTP.js

@@ -0,0 +1,492 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Controller } from "react-hook-form";
+import { t, useComponentsI18n } from "../i18n";
+const DEFAULT_MASK = "999999";
+const DIGIT_RE = /^[0-9]$/;
+const ALPHANUMERIC_RE = /^[A-Za-z0-9]$/;
+function normalizeExternalValue(value) {
+    if (value == null)
+        return "";
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number")
+        return String(value);
+    return String(value);
+}
+function toCssSize(value) {
+    if (value === undefined)
+        return "fit-content";
+    return typeof value === "number" ? `${value}px` : value;
+}
+function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === "function") {
+                ref(node);
+                continue;
+            }
+            if (typeof ref === "object" && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function buildMask(source) {
+    const tokens = [];
+    const slots = [];
+    let nextSlotIndex = 0;
+    for (const char of source) {
+        if (char === "#" || char === "9") {
+            const slot = {
+                type: "slot",
+                slotIndex: nextSlotIndex,
+                slotKind: char === "#" ? "alphanumeric" : "digit"
+            };
+            tokens.push(slot);
+            slots.push(slot);
+            nextSlotIndex += 1;
+        }
+        else {
+            tokens.push({ type: "separator", value: char });
+        }
+    }
+    return { tokens, slots };
+}
+function parseMask(mask) {
+    const source = mask && mask.length > 0 ? mask : DEFAULT_MASK;
+    const parsed = buildMask(source);
+    if (parsed.slots.length > 0)
+        return parsed;
+    return buildMask(DEFAULT_MASK);
+}
+function buildEmptySlotValues(slots) {
+    return Array.from({ length: slots.length }, () => "");
+}
+function isAcceptedChar(slot, char) {
+    if (char.length !== 1)
+        return false;
+    if (slot.slotKind === "digit")
+        return DIGIT_RE.test(char);
+    return ALPHANUMERIC_RE.test(char);
+}
+function textToSlotValues(text, slots) {
+    const next = buildEmptySlotValues(slots);
+    let nextSlotIndex = 0;
+    for (const char of text) {
+        if (nextSlotIndex >= slots.length)
+            break;
+        const slot = slots[nextSlotIndex];
+        if (!slot)
+            break;
+        if (!isAcceptedChar(slot, char))
+            continue;
+        next[nextSlotIndex] = char;
+        nextSlotIndex += 1;
+    }
+    return next;
+}
+function slotValuesToRaw(slotValues) {
+    return slotValues.join("");
+}
+function hasRemainingSlotBeforeLastFilled(tokens, tokenIndex, lastFilledSlotIndex) {
+    for (let index = tokenIndex + 1; index < tokens.length; index += 1) {
+        const token = tokens[index];
+        if (!token || token.type !== "slot")
+            continue;
+        return token.slotIndex <= lastFilledSlotIndex;
+    }
+    return false;
+}
+function slotValuesToMasked(tokens, slotValues) {
+    let lastFilledSlotIndex = -1;
+    for (let index = slotValues.length - 1; index >= 0; index -= 1) {
+        const value = slotValues[index];
+        if (!value)
+            continue;
+        lastFilledSlotIndex = index;
+        break;
+    }
+    if (lastFilledSlotIndex < 0)
+        return "";
+    let masked = "";
+    let hasWrittenAnySlot = false;
+    for (let tokenIndex = 0; tokenIndex < tokens.length; tokenIndex += 1) {
+        const token = tokens[tokenIndex];
+        if (!token)
+            continue;
+        if (token.type === "separator") {
+            if (!hasWrittenAnySlot)
+                continue;
+            if (!hasRemainingSlotBeforeLastFilled(tokens, tokenIndex, lastFilledSlotIndex))
+                continue;
+            masked += token.value;
+            continue;
+        }
+        if (token.slotIndex > lastFilledSlotIndex)
+            break;
+        const value = slotValues[token.slotIndex] ?? "";
+        if (!value)
+            continue;
+        masked += value;
+        hasWrittenAnySlot = true;
+    }
+    return masked;
+}
+function areSlotValuesEqual(left, right) {
+    if (left.length !== right.length)
+        return false;
+    for (let index = 0; index < left.length; index += 1) {
+        if ((left[index] ?? "") !== (right[index] ?? ""))
+            return false;
+    }
+    return true;
+}
+function clampIndex(index, slotCount) {
+    if (slotCount <= 0)
+        return 0;
+    if (index < 0)
+        return 0;
+    if (index > slotCount - 1)
+        return slotCount - 1;
+    return index;
+}
+const SgInputOTPBase = React.forwardRef(function SgInputOTPBase(props, ref) {
+    const i18n = useComponentsI18n();
+    const { id, label, hintText, mask, value, defaultValue, error, className, groupClassName, slotClassName, separatorClassName, inputProps, width, enabled = true, readOnly = false, required = false, requiredMessage, validation, validateOnBlur = true, onValidation, onChange, onRawChange, onComplete, onEnter, onExit, onClear, name, onFieldChange, onFieldBlur, hiddenFieldRef } = props;
+    const parsedMask = React.useMemo(() => parseMask(mask), [mask]);
+    const tokens = parsedMask.tokens;
+    const slots = parsedMask.slots;
+    const slotCount = slots.length;
+    const makeSlotValues = React.useCallback((text) => textToSlotValues(text, slots), [slots]);
+    const [slotValues, setSlotValues] = React.useState(() => {
+        const seeded = normalizeExternalValue(value ?? defaultValue ?? "");
+        return makeSlotValues(seeded);
+    });
+    const slotValuesRef = React.useRef(slotValues);
+    const slotRefs = React.useRef([]);
+    const hiddenInputRef = React.useRef(null);
+    const hasInteractedRef = React.useRef(false);
+    const focusWithinRef = React.useRef(false);
+    const [internalError, setInternalError] = React.useState(null);
+    const { ref: inputRef, className: inputClassName, onChange: onSlotInputChange, onPaste: onSlotInputPaste, onKeyDown: onSlotInputKeyDown, onFocus: onSlotInputFocus, onBlur: onSlotInputBlur, autoComplete: slotAutoComplete, inputMode: slotInputMode, pattern: slotPattern, disabled: inputDisabled, readOnly: inputReadOnly, autoFocus: slotAutoFocus, ...restSlotInputProps } = inputProps ?? {};
+    React.useEffect(() => {
+        slotValuesRef.current = slotValues;
+    }, [slotValues]);
+    React.useEffect(() => {
+        if (slotRefs.current.length <= slotCount)
+            return;
+        slotRefs.current = slotRefs.current.slice(0, slotCount);
+    }, [slotCount]);
+    React.useEffect(() => {
+        if (value === undefined)
+            return;
+        const next = makeSlotValues(normalizeExternalValue(value));
+        setSlotValues((prev) => (areSlotValuesEqual(prev, next) ? prev : next));
+    }, [makeSlotValues, value]);
+    React.useEffect(() => {
+        if (value !== undefined)
+            return;
+        setSlotValues((prev) => {
+            const next = makeSlotValues(slotValuesToRaw(prev));
+            return areSlotValuesEqual(prev, next) ? prev : next;
+        });
+    }, [makeSlotValues, value]);
+    const focusSlot = React.useCallback((requestedIndex) => {
+        const nextIndex = clampIndex(requestedIndex, slotCount);
+        const node = slotRefs.current[nextIndex];
+        if (!node)
+            return;
+        node.focus();
+        node.select();
+    }, [slotCount]);
+    const runValidation = React.useCallback((rawValue, maskedValue) => {
+        if (!rawValue && required) {
+            const message = requiredMessage ?? t(i18n, "components.inputs.required");
+            setInternalError(message);
+            onValidation?.(message);
+            return message;
+        }
+        if (validation) {
+            const message = validation(rawValue, maskedValue);
+            setInternalError(message);
+            onValidation?.(message ?? null);
+            return message ?? null;
+        }
+        setInternalError(null);
+        onValidation?.(null);
+        return null;
+    }, [i18n, onValidation, required, requiredMessage, validation]);
+    const commitSlotValues = React.useCallback((nextSlotValues, options) => {
+        const previousRawValue = slotValuesToRaw(slotValuesRef.current);
+        const nextRawValue = slotValuesToRaw(nextSlotValues);
+        const nextMaskedValue = slotValuesToMasked(tokens, nextSlotValues);
+        hasInteractedRef.current = true;
+        slotValuesRef.current = nextSlotValues;
+        setSlotValues(nextSlotValues);
+        if (hiddenInputRef.current) {
+            hiddenInputRef.current.value = nextRawValue;
+        }
+        onChange?.(nextMaskedValue);
+        onRawChange?.(nextRawValue);
+        onFieldChange?.(nextRawValue);
+        const shouldValidateNow = options?.triggerValidation ?? !validateOnBlur;
+        if (shouldValidateNow) {
+            runValidation(nextRawValue, nextMaskedValue);
+        }
+        const isComplete = nextSlotValues.length > 0 && nextSlotValues.every((part) => part.length === 1);
+        if (isComplete) {
+            onComplete?.(nextMaskedValue);
+        }
+        if (previousRawValue.length > 0 && nextRawValue.length === 0) {
+            onClear?.();
+        }
+        if (options?.focusIndex === undefined)
+            return;
+        const nextFocusIndex = clampIndex(options.focusIndex, slotCount);
+        if (typeof window !== "undefined") {
+            window.requestAnimationFrame(() => focusSlot(nextFocusIndex));
+            return;
+        }
+        focusSlot(nextFocusIndex);
+    }, [
+        focusSlot,
+        onChange,
+        onClear,
+        onComplete,
+        onFieldChange,
+        onRawChange,
+        runValidation,
+        slotCount,
+        tokens,
+        validateOnBlur
+    ]);
+    const applyTextFrom = React.useCallback((startSlotIndex, text, replaceTail) => {
+        if (!text)
+            return;
+        const next = [...slotValuesRef.current];
+        const boundedStart = clampIndex(startSlotIndex, slotCount);
+        if (replaceTail) {
+            for (let index = boundedStart; index < next.length; index += 1) {
+                next[index] = "";
+            }
+        }
+        let pointer = boundedStart;
+        for (const char of text) {
+            if (pointer >= slots.length)
+                break;
+            const slot = slots[pointer];
+            if (!slot)
+                break;
+            if (!isAcceptedChar(slot, char))
+                continue;
+            next[pointer] = char;
+            pointer += 1;
+        }
+        const focusIndex = clampIndex(pointer, slotCount);
+        commitSlotValues(next, { focusIndex });
+    }, [commitSlotValues, slotCount, slots]);
+    React.useImperativeHandle(ref, () => ({
+        focus: (slotIndex = 0) => {
+            focusSlot(slotIndex);
+        },
+        clear: () => {
+            commitSlotValues(buildEmptySlotValues(slots), {
+                focusIndex: 0,
+                triggerValidation: !validateOnBlur
+            });
+        },
+        getRawValue: () => slotValuesToRaw(slotValuesRef.current),
+        getMaskedValue: () => slotValuesToMasked(tokens, slotValuesRef.current)
+    }), [commitSlotValues, focusSlot, slots, tokens, validateOnBlur]);
+    const handleGroupFocusCapture = React.useCallback(() => {
+        if (focusWithinRef.current)
+            return;
+        focusWithinRef.current = true;
+        onEnter?.();
+    }, [onEnter]);
+    const handleGroupBlurCapture = React.useCallback((event) => {
+        const nextTarget = event.relatedTarget;
+        if (nextTarget && event.currentTarget.contains(nextTarget))
+            return;
+        focusWithinRef.current = false;
+        const nextRawValue = slotValuesToRaw(slotValuesRef.current);
+        const nextMaskedValue = slotValuesToMasked(tokens, slotValuesRef.current);
+        if (validateOnBlur || hasInteractedRef.current) {
+            runValidation(nextRawValue, nextMaskedValue);
+        }
+        onExit?.();
+        onFieldBlur?.(nextRawValue);
+    }, [onExit, onFieldBlur, runValidation, tokens, validateOnBlur]);
+    const handleSlotChange = React.useCallback((slotIndex, event) => {
+        onSlotInputChange?.(event);
+        if (event.defaultPrevented)
+            return;
+        const slot = slots[slotIndex];
+        if (!slot)
+            return;
+        const typed = event.currentTarget.value ?? "";
+        if (!typed) {
+            const next = [...slotValuesRef.current];
+            next[slotIndex] = "";
+            commitSlotValues(next, { focusIndex: slotIndex });
+            return;
+        }
+        if (typed.length > 1) {
+            applyTextFrom(slotIndex, typed, true);
+            return;
+        }
+        const nextChar = typed.slice(-1);
+        if (!isAcceptedChar(slot, nextChar)) {
+            event.currentTarget.value = slotValuesRef.current[slotIndex] ?? "";
+            return;
+        }
+        const next = [...slotValuesRef.current];
+        next[slotIndex] = nextChar;
+        commitSlotValues(next, { focusIndex: slotIndex + 1 });
+    }, [applyTextFrom, commitSlotValues, onSlotInputChange, slots]);
+    const handleSlotPaste = React.useCallback((slotIndex, event) => {
+        onSlotInputPaste?.(event);
+        if (event.defaultPrevented)
+            return;
+        event.preventDefault();
+        const pasted = event.clipboardData.getData("text") ?? "";
+        if (!pasted)
+            return;
+        applyTextFrom(slotIndex, pasted, true);
+    }, [applyTextFrom, onSlotInputPaste]);
+    const handleSlotKeyDown = React.useCallback((slotIndex, event) => {
+        onSlotInputKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const slot = slots[slotIndex];
+        if (!slot)
+            return;
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusSlot(slotIndex - 1);
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusSlot(slotIndex + 1);
+            return;
+        }
+        if (event.key === "Backspace") {
+            event.preventDefault();
+            const next = [...slotValuesRef.current];
+            const currentValue = next[slotIndex] ?? "";
+            if (currentValue) {
+                next[slotIndex] = "";
+                commitSlotValues(next, { focusIndex: slotIndex });
+                return;
+            }
+            if (slotIndex === 0)
+                return;
+            next[slotIndex - 1] = "";
+            commitSlotValues(next, { focusIndex: slotIndex - 1 });
+            return;
+        }
+        if (event.key === "Delete") {
+            event.preventDefault();
+            const next = [...slotValuesRef.current];
+            next[slotIndex] = "";
+            commitSlotValues(next, { focusIndex: slotIndex });
+            return;
+        }
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            if (!isAcceptedChar(slot, event.key)) {
+                event.preventDefault();
+            }
+        }
+    }, [commitSlotValues, focusSlot, onSlotInputKeyDown, slots]);
+    const hasError = Boolean(error ?? internalError);
+    const resolvedError = error ?? internalError ?? undefined;
+    const isDisabled = enabled === false || Boolean(inputDisabled);
+    const isReadOnly = readOnly || Boolean(inputReadOnly);
+    const mergedSlotClass = [
+        "h-12 w-11 rounded-md border bg-white px-0 text-center text-base font-medium shadow-sm outline-none transition-all",
+        hasError
+            ? "border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
+            : "border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]",
+        "disabled:cursor-not-allowed disabled:bg-muted/40 disabled:text-foreground/40",
+        "read-only:cursor-default read-only:bg-muted/30",
+        inputClassName ?? "",
+        slotClassName ?? ""
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const setHiddenInputRef = React.useMemo(() => mergeRefs(hiddenFieldRef, hiddenInputRef), [hiddenFieldRef]);
+    const setSlotRef = React.useCallback((slotIndex, node) => {
+        slotRefs.current[slotIndex] = node;
+        if (slotIndex !== 0)
+            return;
+        if (!inputRef)
+            return;
+        if (typeof inputRef === "function") {
+            inputRef(node);
+            return;
+        }
+        if (typeof inputRef === "object" && "current" in inputRef) {
+            inputRef.current = node;
+        }
+    }, [inputRef]);
+    const labelText = label ?? "";
+    const firstSlotId = `${id}-slot-0`;
+    return (_jsxs("div", { className: className, style: { width: toCssSize(width) }, children: [labelText ? (_jsxs("label", { htmlFor: firstSlotId, className: "mb-2 block text-sm font-medium text-foreground/80", children: [labelText, required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { className: groupClassName ?? "inline-flex items-center gap-2", onFocusCapture: handleGroupFocusCapture, onBlurCapture: handleGroupBlurCapture, role: "group", "aria-label": labelText || id, "aria-invalid": hasError || undefined, children: tokens.map((token, tokenIndex) => {
+                    if (token.type === "separator") {
+                        return (_jsx("span", { className: separatorClassName ??
+                                "select-none px-1 text-lg font-semibold leading-none text-foreground/60", "aria-hidden": "true", children: token.value }, `${id}-separator-${tokenIndex}`));
+                    }
+                    const slotIndex = token.slotIndex;
+                    const slotValue = slotValues[slotIndex] ?? "";
+                    const computedInputMode = token.slotKind === "digit" ? "numeric" : slotInputMode ?? "text";
+                    const computedPattern = token.slotKind === "digit"
+                        ? "[0-9]*"
+                        : slotPattern ?? "[A-Za-z0-9]*";
+                    return (_createElement("input", { ...restSlotInputProps, key: `${id}-slot-${slotIndex}`, id: `${id}-slot-${slotIndex}`, type: "text", value: slotValue, maxLength: 1, autoComplete: slotIndex === 0 ? slotAutoComplete ?? "one-time-code" : "off", autoFocus: slotIndex === 0 ? slotAutoFocus : false, inputMode: computedInputMode, pattern: computedPattern, className: mergedSlotClass, disabled: isDisabled, readOnly: isReadOnly, "aria-label": labelText ? `${labelText} ${slotIndex + 1}` : `OTP ${slotIndex + 1}`, ref: (node) => setSlotRef(slotIndex, node), onFocus: (event) => {
+                            event.currentTarget.select();
+                            onSlotInputFocus?.(event);
+                        }, onBlur: (event) => {
+                            onSlotInputBlur?.(event);
+                        }, onChange: (event) => handleSlotChange(slotIndex, event), onPaste: (event) => handleSlotPaste(slotIndex, event), onKeyDown: (event) => handleSlotKeyDown(slotIndex, event) }));
+                }) }), hintText ? _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: hintText }) : null, resolvedError ? _jsx("p", { "data-sg-error": true, className: "mt-1 text-xs text-red-600", children: resolvedError }) : null, _jsx("input", { id: `${id}-value`, type: "hidden", name: name, value: slotValuesToRaw(slotValues), ref: setHiddenInputRef, readOnly: true, "aria-hidden": "true" })] }));
+});
+function createSyntheticChangeEvent(name, value) {
+    const target = { name, value };
+    return {
+        target,
+        currentTarget: target
+    };
+}
+function createSyntheticBlurEvent(name, value) {
+    const target = { name, value };
+    return {
+        target,
+        currentTarget: target,
+        relatedTarget: null
+    };
+}
+export const SgInputOTP = React.forwardRef(function SgInputOTP(props, ref) {
+    const { control, name, register, rules, ...rest } = props;
+    if (name && register) {
+        const registration = register(name, rules);
+        return (_jsx(SgInputOTPBase, { ...rest, ref: ref, name: name, hiddenFieldRef: registration.ref, onFieldChange: (rawValue) => {
+                registration.onChange(createSyntheticChangeEvent(name, rawValue));
+            }, onFieldBlur: (rawValue) => {
+                registration.onBlur(createSyntheticBlurEvent(name, rawValue));
+            } }));
+    }
+    if (control && name) {
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputOTPBase, { ...rest, ref: ref, name: name, value: normalizeExternalValue(field.value), error: rest.error ?? fieldState.error?.message, hiddenFieldRef: field.ref, onFieldChange: (rawValue) => {
+                    field.onChange(rawValue);
+                }, onFieldBlur: () => {
+                    field.onBlur();
+                } })) }));
+    }
+    return _jsx(SgInputOTPBase, { ...rest, ref: ref, name: name });
+});

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;AAqVF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoMtE"}

package/dist/others/SgPlayground.js

@@ -0,0 +1,389 @@
+"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 = {
+    "@codesandbox/sandpack-react": "^2.20.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"
+};
+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.9",
+  "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"
+  }
+}