@seedgrid/fe-components 0.2.8 → 0.2.9

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";

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";

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.map

@@ -1 +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"}
+{"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

@@ -9,6 +9,7 @@ function cn(...parts) {
 }
 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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-components",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",