tempest-react-sdk 0.77.0 → 0.79.0

package/dist/components/PasswordInput/PasswordInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.cjs","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — on top of the SDK's shared field props,\n * showStrength/strength/strengthLabels are the meter and toggleLabels is the\n * show/hide button's accessible name — both need their copy from the app, since\n * neither can be translated by the SDK.\n */\nimport { forwardRef, useId, useState } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PasswordInput.module.css\";\n\nexport type PasswordStrength = 0 | 1 | 2 | 3 | 4;\n\nexport interface PasswordInputProps extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\"\n> {\n    /** Label rendered above the input. */\n    label?: ReactNode;\n    /** Helper text below — replaced by `error` when set. */\n    helperText?: ReactNode;\n    /** Error message. Adds `aria-invalid` + red border. */\n    error?: string;\n    /** Visual size of the input. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Show a strength meter below the field. Default `false`. */\n    showStrength?: boolean;\n    /** Override the automatic strength calc (0–4). */\n    strength?: PasswordStrength;\n    /** Custom labels per strength level (5 entries). */\n    strengthLabels?: readonly [string, string, string, string, string];\n    /** Custom toggle button labels for accessibility. */\n    toggleLabels?: { show: string; hide: string };\n}\n\nconst DEFAULT_STRENGTH_LABELS = [\"Muito fraca\", \"Fraca\", \"Razoável\", \"Forte\", \"Excelente\"] as const;\n\nexport function estimatePasswordStrength(value: string): PasswordStrength {\n    if (!value) return 0;\n    let score = 0;\n    if (value.length >= 8) score += 1;\n    if (value.length >= 12) score += 1;\n    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;\n    if (/[0-9]/.test(value)) score += 1;\n    if (/[^A-Za-z0-9]/.test(value)) score += 1;\n    return Math.min(4, score) as PasswordStrength;\n}\n\n/**\n * Password field with toggle-visibility button and optional strength meter.\n *\n * @example\n * <PasswordInput label=\"Senha\" showStrength autoComplete=\"new-password\" />\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n    function PasswordInput(\n        {\n            label,\n            helperText,\n            error,\n            size = \"md\",\n            showStrength = false,\n            strength,\n            strengthLabels = DEFAULT_STRENGTH_LABELS,\n            toggleLabels = { show: \"Mostrar senha\", hide: \"Esconder senha\" },\n            className,\n            value,\n            defaultValue,\n            id,\n            ...inputProps\n        },\n        ref,\n    ) {\n        const generatedId = useId();\n        const inputId = id ?? generatedId;\n        const describedById = error\n            ? `${inputId}-error`\n            : helperText\n              ? `${inputId}-helper`\n              : undefined;\n        const [revealed, setRevealed] = useState<boolean>(false);\n        const stringValue = String((value ?? defaultValue ?? \"\") as string);\n        const computedStrength: PasswordStrength =\n            strength ?? estimatePasswordStrength(stringValue);\n\n        return (\n            <div className={cn(styles.wrapper, styles[size], error && styles.error, className)}>\n                {label && (\n                    <label htmlFor={inputId} className={styles.label}>\n                        {label}\n                    </label>\n                )}\n                <div className={styles.field}>\n                    <input\n                        ref={ref}\n                        {...inputProps}\n                        id={inputId}\n                        value={value}\n                        defaultValue={defaultValue}\n                        type={revealed ? \"text\" : \"password\"}\n                        aria-invalid={!!error}\n                        aria-describedby={describedById}\n                        className={styles.input}\n                    />\n                    <button\n                        type=\"button\"\n                        className={styles.toggle}\n                        aria-label={revealed ? toggleLabels.hide : toggleLabels.show}\n                        aria-pressed={revealed}\n                        onClick={() => setRevealed((on) => !on)}\n                    >\n                        {revealed ? \"🙈\" : \"👁\"}\n                    </button>\n                </div>\n                {showStrength && (\n                    <div\n                        className={cn(styles.strength, styles[`level${computedStrength}`])}\n                        aria-label={strengthLabels[computedStrength]}\n                    >\n                        <div className={styles.strengthBar}>\n                            <span style={{ width: `${(computedStrength / 4) * 100}%` }} />\n                        </div>\n                        <span className={styles.strengthLabel}>\n                            {strengthLabels[computedStrength]}\n                        </span>\n                    </div>\n                )}\n                {error ? (\n                    <span id={`${inputId}-error`} className={styles.errorText}>\n                        {error}\n                    </span>\n                ) : helperText ? (\n                    <span id={`${inputId}-helper`} className={styles.helper}>\n                        {helperText}\n                    </span>\n                ) : null}\n            </div>\n        );\n    },\n);\n"],"mappings":"oIAmCA,IAAM,EAA0B,CAAC,cAAe,QAAS,WAAY,QAAS,WAAW,EAEzF,SAAgB,EAAyB,EAAiC,CACtE,GAAI,CAAC,EAAO,MAAO,GACnB,IAAI,EAAQ,EAMZ,OALI,EAAM,QAAU,IAAG,GAAS,GAC5B,EAAM,QAAU,KAAI,GAAS,GAC7B,QAAQ,KAAK,CAAK,GAAK,QAAQ,KAAK,CAAK,IAAG,GAAS,GACrD,QAAQ,KAAK,CAAK,IAAG,GAAS,GAC9B,eAAe,KAAK,CAAK,IAAG,GAAS,GAClC,KAAK,IAAI,EAAG,CAAK,CAC5B,CAQA,IAAa,GAAA,EAAgB,EAAA,WAAA,CACzB,SACI,CACI,QACA,aACA,QACA,OAAO,KACP,eAAe,GACf,WACA,iBAAiB,EACjB,eAAe,CAAE,KAAM,gBAAiB,KAAM,gBAAiB,EAC/D,YACA,QACA,eACA,KACA,GAAG,GAEP,EACF,CACE,IAAM,GAAA,EAAc,EAAA,MAAA,CAAM,EACpB,EAAU,GAAM,EAChB,EAAgB,EAChB,GAAG,EAAQ,QACX,EACE,GAAG,EAAQ,SACX,IAAA,GACF,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAkB,EAAK,EAEjD,EACF,GAAY,EAFI,OAAQ,GAAS,GAAgB,EAEZ,CAAW,EAEpD,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,EAAA,QAAO,GAAO,GAAS,EAAA,QAAO,MAAO,CAAS,EAAjF,SAAA,CACK,IACG,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,QAAS,EAAS,UAAW,EAAA,QAAO,MACtC,SAAA,CACE,CAAA,GAEX,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,MAAvB,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,QAAD,CACS,MACL,GAAI,EACJ,GAAI,EACG,QACO,eACd,KAAM,EAAW,OAAS,WAC1B,eAAc,CAAC,CAAC,EAChB,mBAAkB,EAClB,UAAW,EAAA,QAAO,KACrB,CAAA,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,OAClB,aAAY,EAAW,EAAa,KAAO,EAAa,KACxD,eAAc,EACd,YAAe,EAAa,GAAO,CAAC,CAAE,EAErC,SAAA,EAAW,KAAO,IACf,CAAA,CACP,IACJ,IACG,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,SAAU,EAAA,QAAO,QAAQ,IAAmB,EACjE,aAAY,EAAe,GAF/B,SAAA,EAII,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,YACnB,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,MAAO,CAAE,MAAO,GAAI,EAAmB,EAAK,IAAI,EAAG,CAAI,CAAA,CAC5D,CAAA,GACL,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,cACnB,SAAA,EAAe,EACd,CAAA,CACL,IAER,GACG,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAG,EAAQ,QAAS,UAAW,EAAA,QAAO,UAC3C,SAAA,CACC,CAAA,EACN,GACA,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAG,EAAQ,SAAU,UAAW,EAAA,QAAO,OAC5C,SAAA,CACC,CAAA,EACN,IACH,GAEb,CACJ"}
+{"version":3,"file":"PasswordInput.cjs","names":["forwardRef","useId","useState","cn","styles","require_cn","require_PasswordInput_module","react","react_jsx_runtime","DEFAULT_STRENGTH_LABELS","estimatePasswordStrength","value","score","PasswordInput","inputProps","generatedId","inputId","id","describedById","error","helperText","revealed","setRevealed","computedStrength","strength","defaultValue","size","className","label","toggleLabels","on","showStrength","strengthLabels"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — on top of the SDK's shared field props,\n * showStrength/strength/strengthLabels are the meter and toggleLabels is the\n * show/hide button's accessible name — both need their copy from the app, since\n * neither can be translated by the SDK.\n */\nimport { forwardRef, useId, useState } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PasswordInput.module.css\";\n\nexport type PasswordStrength = 0 | 1 | 2 | 3 | 4;\n\nexport interface PasswordInputProps extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\"\n> {\n    /** Label rendered above the input. */\n    label?: ReactNode;\n    /** Helper text below — replaced by `error` when set. */\n    helperText?: ReactNode;\n    /** Error message. Adds `aria-invalid` + red border. */\n    error?: string;\n    /** Visual size of the input. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Show a strength meter below the field. Default `false`. */\n    showStrength?: boolean;\n    /** Override the automatic strength calc (0–4). */\n    strength?: PasswordStrength;\n    /** Custom labels per strength level (5 entries). */\n    strengthLabels?: readonly [string, string, string, string, string];\n    /** Custom toggle button labels for accessibility. */\n    toggleLabels?: { show: string; hide: string };\n}\n\nconst DEFAULT_STRENGTH_LABELS = [\"Muito fraca\", \"Fraca\", \"Razoável\", \"Forte\", \"Excelente\"] as const;\n\nexport function estimatePasswordStrength(value: string): PasswordStrength {\n    if (!value) return 0;\n    let score = 0;\n    if (value.length >= 8) score += 1;\n    if (value.length >= 12) score += 1;\n    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;\n    if (/[0-9]/.test(value)) score += 1;\n    if (/[^A-Za-z0-9]/.test(value)) score += 1;\n    return Math.min(4, score) as PasswordStrength;\n}\n\n/**\n * Password field with toggle-visibility button and optional strength meter.\n *\n * @example\n * <PasswordInput label=\"Senha\" showStrength autoComplete=\"new-password\" />\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n    function PasswordInput(\n        {\n            label,\n            helperText,\n            error,\n            size = \"md\",\n            showStrength = false,\n            strength,\n            strengthLabels = DEFAULT_STRENGTH_LABELS,\n            toggleLabels = { show: \"Mostrar senha\", hide: \"Esconder senha\" },\n            className,\n            value,\n            defaultValue,\n            id,\n            ...inputProps\n        },\n        ref,\n    ) {\n        const generatedId = useId();\n        const inputId = id ?? generatedId;\n        const describedById = error\n            ? `${inputId}-error`\n            : helperText\n              ? `${inputId}-helper`\n              : undefined;\n        const [revealed, setRevealed] = useState<boolean>(false);\n        const stringValue = String((value ?? defaultValue ?? \"\") as string);\n        const computedStrength: PasswordStrength =\n            strength ?? estimatePasswordStrength(stringValue);\n\n        return (\n            <div className={cn(styles.wrapper, styles[size], error && styles.error, className)}>\n                {label && (\n                    <label htmlFor={inputId} className={styles.label}>\n                        {label}\n                    </label>\n                )}\n                <div className={styles.field}>\n                    <input\n                        ref={ref}\n                        {...inputProps}\n                        id={inputId}\n                        value={value}\n                        defaultValue={defaultValue}\n                        type={revealed ? \"text\" : \"password\"}\n                        aria-invalid={!!error}\n                        aria-describedby={describedById}\n                        className={styles.input}\n                    />\n                    <button\n                        type=\"button\"\n                        className={styles.toggle}\n                        aria-label={revealed ? toggleLabels.hide : toggleLabels.show}\n                        aria-pressed={revealed}\n                        onClick={() => setRevealed((on) => !on)}\n                    >\n                        {revealed ? \"🙈\" : \"👁\"}\n                    </button>\n                </div>\n                {showStrength && (\n                    <div\n                        className={cn(styles.strength, styles[`level${computedStrength}`])}\n                        aria-label={strengthLabels[computedStrength]}\n                    >\n                        <div className={styles.strengthBar}>\n                            <span style={{ width: `${(computedStrength / 4) * 100}%` }} />\n                        </div>\n                        <span className={styles.strengthLabel}>\n                            {strengthLabels[computedStrength]}\n                        </span>\n                    </div>\n                )}\n                {error ? (\n                    <span id={`${inputId}-error`} className={styles.errorText}>\n                        {error}\n                    </span>\n                ) : helperText ? (\n                    <span id={`${inputId}-helper`} className={styles.helper}>\n                        {helperText}\n                    </span>\n                ) : null}\n            </div>\n        );\n    },\n);\n"],"mappings":"A,oIAmCA,IAAMS,EAA0B,CAAC,cAAe,QAAS,WAAY,QAAS,WAAW,EAEzF,SAAgBC,EAAyB,EAAiC,CACtE,GAAI,CAACC,EAAO,MAAO,GACnB,IAAIC,EAAQ,EAMZ,OALID,EAAM,QAAU,IAAG,GAAS,GAC5BA,EAAM,QAAU,KAAI,GAAS,GAC7B,QAAQ,KAAKA,CAAK,GAAK,QAAQ,KAAKA,CAAK,IAAG,GAAS,GACrD,QAAQ,KAAKA,CAAK,IAAG,GAAS,GAC9B,eAAe,KAAKA,CAAK,IAAG,GAAS,GAClC,KAAK,IAAI,EAAGC,CAAK,CAC5B,CAQA,IAAaC,GAAA,EAAgBb,EAAAA,WAAAA,CACzB,SACI,CACI,QACA,aACA,QACA,OAAO,KACP,eAAe,GACf,WACA,iBAAiBS,EACjB,eAAe,CAAE,KAAM,gBAAiB,KAAM,gBAAiB,EAC/D,YACA,QACA,eACA,KACA,GAAGK,GAEP,EACF,CACE,IAAMC,GAAA,EAAcd,EAAAA,MAAAA,CAAM,EACpBe,EAAUC,GAAMF,EAChBG,EAAgBC,EAChB,GAAGH,EAAQ,QACXI,EACE,GAAGJ,EAAQ,SACX,IAAA,GACF,CAACK,EAAUC,IAAA,EAAepB,EAAAA,SAAAA,CAAkB,EAAK,EAEjDqB,EACFC,GAAYd,EAFI,OAAQC,GAASc,GAAgB,EAEZ,CAAW,EAEpD,OACI,EAAAjB,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,QAASA,EAAAA,QAAOsB,GAAOP,GAASf,EAAAA,QAAO,MAAOuB,CAAS,EAAjF,SAAA,CACKC,IACG,EAAApB,EAAA,IAAA,CAAC,QAAD,CAAO,QAASQ,EAAS,UAAWZ,EAAAA,QAAO,MACtC,SAAAwB,CACE,CAAA,GAEX,EAAApB,EAAA,KAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,QAAO,MAAvB,SAAA,EACI,EAAAI,EAAA,IAAA,CAAC,QAAD,CACS,MACL,GAAIM,EACJ,GAAIE,EACG,QACO,eACd,KAAMK,EAAW,OAAS,WAC1B,eAAc,CAAC,CAACF,EAChB,mBAAkBD,EAClB,UAAWd,EAAAA,QAAO,KACrB,CAAA,GACD,EAAAI,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAWJ,EAAAA,QAAO,OAClB,aAAYiB,EAAWQ,EAAa,KAAOA,EAAa,KACxD,eAAcR,EACd,YAAeC,EAAa,GAAO,CAACQ,CAAE,EAErC,SAAAT,EAAW,KAAO,IACf,CAAA,CACP,C,GACJU,IACG,EAAAvB,EAAA,KAAA,CAAC,MAAD,CACI,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,SAAUA,EAAAA,QAAO,QAAQmB,IAAmB,EACjE,aAAYS,EAAeT,GAF/B,SAAA,EAII,EAAAf,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWJ,EAAAA,QAAO,YACnB,UAAA,EAAAI,EAAA,IAAA,CAAC,OAAD,CAAM,MAAO,CAAE,MAAO,GAAIe,EAAmB,EAAK,IAAI,EAAG,CAAI,CAAA,CAC5D,CAAA,GACL,EAAAf,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWJ,EAAAA,QAAO,cACnB,SAAA4B,EAAeT,EACd,CAAA,CACL,C,GAERJ,GACG,EAAAX,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAGQ,EAAQ,QAAS,UAAWZ,EAAAA,QAAO,UAC3C,SAAAe,CACC,CAAA,EACNC,GACA,EAAAZ,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI,GAAGQ,EAAQ,SAAU,UAAWZ,EAAAA,QAAO,OAC5C,SAAAgB,CACC,CAAA,EACN,IACH,C,EAEb,CACJ,E"}

package/dist/components/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — on top of the SDK's shared field props,\n * showStrength/strength/strengthLabels are the meter and toggleLabels is the\n * show/hide button's accessible name — both need their copy from the app, since\n * neither can be translated by the SDK.\n */\nimport { forwardRef, useId, useState } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PasswordInput.module.css\";\n\nexport type PasswordStrength = 0 | 1 | 2 | 3 | 4;\n\nexport interface PasswordInputProps extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\"\n> {\n    /** Label rendered above the input. */\n    label?: ReactNode;\n    /** Helper text below — replaced by `error` when set. */\n    helperText?: ReactNode;\n    /** Error message. Adds `aria-invalid` + red border. */\n    error?: string;\n    /** Visual size of the input. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Show a strength meter below the field. Default `false`. */\n    showStrength?: boolean;\n    /** Override the automatic strength calc (0–4). */\n    strength?: PasswordStrength;\n    /** Custom labels per strength level (5 entries). */\n    strengthLabels?: readonly [string, string, string, string, string];\n    /** Custom toggle button labels for accessibility. */\n    toggleLabels?: { show: string; hide: string };\n}\n\nconst DEFAULT_STRENGTH_LABELS = [\"Muito fraca\", \"Fraca\", \"Razoável\", \"Forte\", \"Excelente\"] as const;\n\nexport function estimatePasswordStrength(value: string): PasswordStrength {\n    if (!value) return 0;\n    let score = 0;\n    if (value.length >= 8) score += 1;\n    if (value.length >= 12) score += 1;\n    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;\n    if (/[0-9]/.test(value)) score += 1;\n    if (/[^A-Za-z0-9]/.test(value)) score += 1;\n    return Math.min(4, score) as PasswordStrength;\n}\n\n/**\n * Password field with toggle-visibility button and optional strength meter.\n *\n * @example\n * <PasswordInput label=\"Senha\" showStrength autoComplete=\"new-password\" />\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n    function PasswordInput(\n        {\n            label,\n            helperText,\n            error,\n            size = \"md\",\n            showStrength = false,\n            strength,\n            strengthLabels = DEFAULT_STRENGTH_LABELS,\n            toggleLabels = { show: \"Mostrar senha\", hide: \"Esconder senha\" },\n            className,\n            value,\n            defaultValue,\n            id,\n            ...inputProps\n        },\n        ref,\n    ) {\n        const generatedId = useId();\n        const inputId = id ?? generatedId;\n        const describedById = error\n            ? `${inputId}-error`\n            : helperText\n              ? `${inputId}-helper`\n              : undefined;\n        const [revealed, setRevealed] = useState<boolean>(false);\n        const stringValue = String((value ?? defaultValue ?? \"\") as string);\n        const computedStrength: PasswordStrength =\n            strength ?? estimatePasswordStrength(stringValue);\n\n        return (\n            <div className={cn(styles.wrapper, styles[size], error && styles.error, className)}>\n                {label && (\n                    <label htmlFor={inputId} className={styles.label}>\n                        {label}\n                    </label>\n                )}\n                <div className={styles.field}>\n                    <input\n                        ref={ref}\n                        {...inputProps}\n                        id={inputId}\n                        value={value}\n                        defaultValue={defaultValue}\n                        type={revealed ? \"text\" : \"password\"}\n                        aria-invalid={!!error}\n                        aria-describedby={describedById}\n                        className={styles.input}\n                    />\n                    <button\n                        type=\"button\"\n                        className={styles.toggle}\n                        aria-label={revealed ? toggleLabels.hide : toggleLabels.show}\n                        aria-pressed={revealed}\n                        onClick={() => setRevealed((on) => !on)}\n                    >\n                        {revealed ? \"🙈\" : \"👁\"}\n                    </button>\n                </div>\n                {showStrength && (\n                    <div\n                        className={cn(styles.strength, styles[`level${computedStrength}`])}\n                        aria-label={strengthLabels[computedStrength]}\n                    >\n                        <div className={styles.strengthBar}>\n                            <span style={{ width: `${(computedStrength / 4) * 100}%` }} />\n                        </div>\n                        <span className={styles.strengthLabel}>\n                            {strengthLabels[computedStrength]}\n                        </span>\n                    </div>\n                )}\n                {error ? (\n                    <span id={`${inputId}-error`} className={styles.errorText}>\n                        {error}\n                    </span>\n                ) : helperText ? (\n                    <span id={`${inputId}-helper`} className={styles.helper}>\n                        {helperText}\n                    </span>\n                ) : null}\n            </div>\n        );\n    },\n);\n"],"mappings":";;;;;AAmCA,IAAM,IAA0B;CAAC;CAAe;CAAS;CAAY;CAAS;AAAW;AAEzF,SAAgB,EAAyB,GAAiC;CACtE,IAAI,CAAC,GAAO,OAAO;CACnB,IAAI,IAAQ;CAMZ,OALI,EAAM,UAAU,MAAG,KAAS,IAC5B,EAAM,UAAU,OAAI,KAAS,IAC7B,QAAQ,KAAK,CAAK,KAAK,QAAQ,KAAK,CAAK,MAAG,KAAS,IACrD,QAAQ,KAAK,CAAK,MAAG,KAAS,IAC9B,eAAe,KAAK,CAAK,MAAG,KAAS,IAClC,KAAK,IAAI,GAAG,CAAK;AAC5B;AAQA,IAAa,IAAgB,EACzB,SACI,EACI,UACA,eACA,UACA,UAAO,MACP,kBAAe,IACf,aACA,oBAAiB,GACjB,kBAAe;CAAE,MAAM;CAAiB,MAAM;AAAiB,GAC/D,cACA,UACA,iBACA,OACA,GAAG,KAEP,GACF;CACE,IAAM,IAAc,EAAM,GACpB,IAAU,KAAM,GAChB,IAAgB,IAChB,GAAG,EAAQ,UACX,IACE,GAAG,EAAQ,WACX,KAAA,GACF,CAAC,GAAU,KAAe,EAAkB,EAAK,GAEjD,IACF,KAAY,EAFI,OAAQ,KAAS,KAAgB,EAEZ,CAAW;CAEpD,OACI,kBAAC,OAAD;EAAK,WAAW,EAAG,EAAO,SAAS,EAAO,IAAO,KAAS,EAAO,OAAO,CAAS;EAAjF,UAAA;GACK,KACG,kBAAC,SAAD;IAAO,SAAS;IAAS,WAAW,EAAO;IACtC,UAAA;GACE,CAAA;GAEX,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAvB,UAAA,CACI,kBAAC,SAAD;KACS;KACL,GAAI;KACJ,IAAI;KACG;KACO;KACd,MAAM,IAAW,SAAS;KAC1B,gBAAc,CAAC,CAAC;KAChB,oBAAkB;KAClB,WAAW,EAAO;IACrB,CAAA,GACD,kBAAC,UAAD;KACI,MAAK;KACL,WAAW,EAAO;KAClB,cAAY,IAAW,EAAa,OAAO,EAAa;KACxD,gBAAc;KACd,eAAe,GAAa,MAAO,CAAC,CAAE;KAErC,UAAA,IAAW,OAAO;IACf,CAAA,CACP;;GACJ,KACG,kBAAC,OAAD;IACI,WAAW,EAAG,EAAO,UAAU,EAAO,QAAQ,IAAmB;IACjE,cAAY,EAAe;IAF/B,UAAA,CAII,kBAAC,OAAD;KAAK,WAAW,EAAO;KACnB,UAAA,kBAAC,QAAD,EAAM,OAAO,EAAE,OAAO,GAAI,IAAmB,IAAK,IAAI,GAAG,EAAI,CAAA;IAC5D,CAAA,GACL,kBAAC,QAAD;KAAM,WAAW,EAAO;KACnB,UAAA,EAAe;IACd,CAAA,CACL;;GAER,IACG,kBAAC,QAAD;IAAM,IAAI,GAAG,EAAQ;IAAS,WAAW,EAAO;IAC3C,UAAA;GACC,CAAA,IACN,IACA,kBAAC,QAAD;IAAM,IAAI,GAAG,EAAQ;IAAU,WAAW,EAAO;IAC5C,UAAA;GACC,CAAA,IACN;EACH;;AAEb,CACJ"}
+{"version":3,"file":"PasswordInput.js","names":["styles","PasswordInput_module_default","DEFAULT_STRENGTH_LABELS","estimatePasswordStrength","value","score","PasswordInput","forwardRef","inputProps","generatedId","useId","inputId","id","describedById","error","helperText","revealed","setRevealed","useState","computedStrength","strength","defaultValue","cn","size","className","label","toggleLabels","on","showStrength","strengthLabels"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — on top of the SDK's shared field props,\n * showStrength/strength/strengthLabels are the meter and toggleLabels is the\n * show/hide button's accessible name — both need their copy from the app, since\n * neither can be translated by the SDK.\n */\nimport { forwardRef, useId, useState } from \"react\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PasswordInput.module.css\";\n\nexport type PasswordStrength = 0 | 1 | 2 | 3 | 4;\n\nexport interface PasswordInputProps extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\"\n> {\n    /** Label rendered above the input. */\n    label?: ReactNode;\n    /** Helper text below — replaced by `error` when set. */\n    helperText?: ReactNode;\n    /** Error message. Adds `aria-invalid` + red border. */\n    error?: string;\n    /** Visual size of the input. */\n    size?: \"sm\" | \"md\" | \"lg\";\n    /** Show a strength meter below the field. Default `false`. */\n    showStrength?: boolean;\n    /** Override the automatic strength calc (0–4). */\n    strength?: PasswordStrength;\n    /** Custom labels per strength level (5 entries). */\n    strengthLabels?: readonly [string, string, string, string, string];\n    /** Custom toggle button labels for accessibility. */\n    toggleLabels?: { show: string; hide: string };\n}\n\nconst DEFAULT_STRENGTH_LABELS = [\"Muito fraca\", \"Fraca\", \"Razoável\", \"Forte\", \"Excelente\"] as const;\n\nexport function estimatePasswordStrength(value: string): PasswordStrength {\n    if (!value) return 0;\n    let score = 0;\n    if (value.length >= 8) score += 1;\n    if (value.length >= 12) score += 1;\n    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 1;\n    if (/[0-9]/.test(value)) score += 1;\n    if (/[^A-Za-z0-9]/.test(value)) score += 1;\n    return Math.min(4, score) as PasswordStrength;\n}\n\n/**\n * Password field with toggle-visibility button and optional strength meter.\n *\n * @example\n * <PasswordInput label=\"Senha\" showStrength autoComplete=\"new-password\" />\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n    function PasswordInput(\n        {\n            label,\n            helperText,\n            error,\n            size = \"md\",\n            showStrength = false,\n            strength,\n            strengthLabels = DEFAULT_STRENGTH_LABELS,\n            toggleLabels = { show: \"Mostrar senha\", hide: \"Esconder senha\" },\n            className,\n            value,\n            defaultValue,\n            id,\n            ...inputProps\n        },\n        ref,\n    ) {\n        const generatedId = useId();\n        const inputId = id ?? generatedId;\n        const describedById = error\n            ? `${inputId}-error`\n            : helperText\n              ? `${inputId}-helper`\n              : undefined;\n        const [revealed, setRevealed] = useState<boolean>(false);\n        const stringValue = String((value ?? defaultValue ?? \"\") as string);\n        const computedStrength: PasswordStrength =\n            strength ?? estimatePasswordStrength(stringValue);\n\n        return (\n            <div className={cn(styles.wrapper, styles[size], error && styles.error, className)}>\n                {label && (\n                    <label htmlFor={inputId} className={styles.label}>\n                        {label}\n                    </label>\n                )}\n                <div className={styles.field}>\n                    <input\n                        ref={ref}\n                        {...inputProps}\n                        id={inputId}\n                        value={value}\n                        defaultValue={defaultValue}\n                        type={revealed ? \"text\" : \"password\"}\n                        aria-invalid={!!error}\n                        aria-describedby={describedById}\n                        className={styles.input}\n                    />\n                    <button\n                        type=\"button\"\n                        className={styles.toggle}\n                        aria-label={revealed ? toggleLabels.hide : toggleLabels.show}\n                        aria-pressed={revealed}\n                        onClick={() => setRevealed((on) => !on)}\n                    >\n                        {revealed ? \"🙈\" : \"👁\"}\n                    </button>\n                </div>\n                {showStrength && (\n                    <div\n                        className={cn(styles.strength, styles[`level${computedStrength}`])}\n                        aria-label={strengthLabels[computedStrength]}\n                    >\n                        <div className={styles.strengthBar}>\n                            <span style={{ width: `${(computedStrength / 4) * 100}%` }} />\n                        </div>\n                        <span className={styles.strengthLabel}>\n                            {strengthLabels[computedStrength]}\n                        </span>\n                    </div>\n                )}\n                {error ? (\n                    <span id={`${inputId}-error`} className={styles.errorText}>\n                        {error}\n                    </span>\n                ) : helperText ? (\n                    <span id={`${inputId}-helper`} className={styles.helper}>\n                        {helperText}\n                    </span>\n                ) : null}\n            </div>\n        );\n    },\n);\n"],"mappings":";;;;;AAmCA,IAAME,IAA0B;CAAC;CAAe;CAAS;CAAY;CAAS;AAAW;AAEzF,SAAgBC,EAAyB,GAAiC;CACtE,IAAI,CAACC,GAAO,OAAO;CACnB,IAAIC,IAAQ;CAMZ,OALID,EAAM,UAAU,MAAG,KAAS,IAC5BA,EAAM,UAAU,OAAI,KAAS,IAC7B,QAAQ,KAAKA,CAAK,KAAK,QAAQ,KAAKA,CAAK,MAAG,KAAS,IACrD,QAAQ,KAAKA,CAAK,MAAG,KAAS,IAC9B,eAAe,KAAKA,CAAK,MAAG,KAAS,IAClC,KAAK,IAAI,GAAGC,CAAK;AAC5B;AAQA,IAAaC,IAAgBC,EACzB,SACI,EACI,UACA,eACA,UACA,UAAO,MACP,kBAAe,IACf,aACA,oBAAiBL,GACjB,kBAAe;CAAE,MAAM;CAAiB,MAAM;AAAiB,GAC/D,cACA,UACA,iBACA,OACA,GAAGM,KAEP,GACF;CACE,IAAMC,IAAcC,EAAM,GACpBC,IAAUC,KAAMH,GAChBI,IAAgBC,IAChB,GAAGH,EAAQ,UACXI,IACE,GAAGJ,EAAQ,WACX,KAAA,GACF,CAACK,GAAUC,KAAeC,EAAkB,EAAK,GAEjDC,IACFC,KAAYjB,EAFI,OAAQC,KAASiB,KAAgB,EAEZ,CAAW;CAEpD,OACI,kBAAC,OAAD;EAAK,WAAWC,EAAGtB,EAAO,SAASA,EAAOuB,IAAOT,KAASd,EAAO,OAAOwB,CAAS;EAAjF,UAAA;GACKC,KACG,kBAAC,SAAD;IAAO,SAASd;IAAS,WAAWX,EAAO;IACtC,UAAAyB;GACE,CAAA;GAEX,kBAAC,OAAD;IAAK,WAAWzB,EAAO;IAAvB,UAAA,CACI,kBAAC,SAAD;KACS;KACL,GAAIQ;KACJ,IAAIG;KACG;KACO;KACd,MAAMK,IAAW,SAAS;KAC1B,gBAAc,CAAC,CAACF;KAChB,oBAAkBD;KAClB,WAAWb,EAAO;IACrB,CAAA,GACD,kBAAC,UAAD;KACI,MAAK;KACL,WAAWA,EAAO;KAClB,cAAYgB,IAAWU,EAAa,OAAOA,EAAa;KACxD,gBAAcV;KACd,eAAeC,GAAa,MAAO,CAACU,CAAE;KAErC,UAAAX,IAAW,OAAO;IACf,CAAA,CACP;;GACJY,KACG,kBAAC,OAAD;IACI,WAAWN,EAAGtB,EAAO,UAAUA,EAAO,QAAQmB,IAAmB;IACjE,cAAYU,EAAeV;IAF/B,UAAA,CAII,kBAAC,OAAD;KAAK,WAAWnB,EAAO;KACnB,UAAA,kBAAC,QAAD,EAAM,OAAO,EAAE,OAAO,GAAImB,IAAmB,IAAK,IAAI,GAAG,EAAI,CAAA;IAC5D,CAAA,GACL,kBAAC,QAAD;KAAM,WAAWnB,EAAO;KACnB,UAAA6B,EAAeV;IACd,CAAA,CACL;;GAERL,IACG,kBAAC,QAAD;IAAM,IAAI,GAAGH,EAAQ;IAAS,WAAWX,EAAO;IAC3C,UAAAc;GACC,CAAA,IACNC,IACA,kBAAC,QAAD;IAAM,IAAI,GAAGJ,EAAQ;IAAU,WAAWX,EAAO;IAC5C,UAAAe;GACC,CAAA,IACN;EACH;;AAEb,CACJ"}

package/dist/components/PasswordInput/PasswordInput.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.module.cjs","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}
+{"version":3,"file":"PasswordInput.module.cjs","names":["wrapper","label","field","input","sm","md","lg","toggle","error","helper","errorText","strength","strengthBar","strengthLabel","level0","level1","level2","level3","level4","PasswordInput_module_default"],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}

package/dist/components/PasswordInput/PasswordInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.module.js","names":[],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}
+{"version":3,"file":"PasswordInput.module.js","names":["wrapper","label","field","input","sm","md","lg","toggle","error","helper","errorText","strength","strengthBar","strengthLabel","level0","level1","level2","level3","level4","PasswordInput_module_default"],"sources":["../../../src/components/PasswordInput/PasswordInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    width: 100%;\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.field {\n    position: relative;\n    display: flex;\n    align-items: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.field:focus-within {\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.input {\n    flex: 1 1 auto;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    color: var(--tempest-text);\n    font: inherit;\n    font-family: var(--tempest-font-sans);\n}\n\n.sm .input {\n    padding: 6px 8px;\n    font-size: var(--tempest-text-sm);\n}\n\n.md .input {\n    padding: 8px 12px;\n    font-size: var(--tempest-text-md);\n}\n\n.lg .input {\n    padding: 10px 14px;\n    font-size: var(--tempest-text-lg);\n}\n\n.toggle {\n    flex: 0 0 auto;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    padding: 0 12px;\n    font-size: 16px;\n    color: var(--tempest-text-muted);\n}\n\n.toggle:hover {\n    color: var(--tempest-text);\n}\n\n.error .field {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n\n.strength {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.strengthBar {\n    flex: 1 1 auto;\n    height: 4px;\n    background: var(--tempest-border);\n    border-radius: var(--tempest-radius-full);\n    overflow: hidden;\n}\n\n.strengthBar > span {\n    display: block;\n    height: 100%;\n    transition: width var(--tempest-duration-base, 200ms);\n}\n\n.strengthLabel {\n    color: var(--tempest-text-muted);\n    flex: 0 0 auto;\n}\n\n.level0 .strengthBar > span,\n.level1 .strengthBar > span {\n    background: var(--tempest-danger-solid, var(--tempest-danger));\n}\n\n.level2 .strengthBar > span {\n    background: var(--tempest-warning-solid, var(--tempest-warning));\n}\n\n.level3 .strengthBar > span,\n.level4 .strengthBar > span {\n    background: var(--tempest-success-solid, var(--tempest-success));\n}\n"],"mappings":";"}

package/dist/components/PinInput/PinInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.cjs","names":[],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — one input per digit, so length,\n * type, masked and autoFocus shape the boxes while\n * value/defaultValue/onChange/onComplete drive them as a single value. The body owns\n * the per-box refs, paste distribution and backspace traversal, which only make\n * sense with the whole array in scope.\n */\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, KeyboardEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PinInput.module.css\";\n\nexport type PinInputType = \"numeric\" | \"alphanumeric\";\nexport type PinInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface PinInputProps {\n    /** Number of cells. Default `6`. */\n    length?: number;\n    /** Allowed character set. `numeric` (default) rejects letters, `alphanumeric` allows both. */\n    type?: PinInputType;\n    /** Visual size. Default `\"md\"`. */\n    size?: PinInputSize;\n    /** Controlled value. */\n    value?: string;\n    /** Initial value (uncontrolled mode). */\n    defaultValue?: string;\n    /** Fires on every change with the current concatenated value. */\n    onChange?: (value: string) => void;\n    /** Fires when the user fills the last cell. */\n    onComplete?: (value: string) => void;\n    /** Show characters obscured (`*`). Default `false`. */\n    masked?: boolean;\n    /** Label rendered above the cells. */\n    label?: string;\n    /** Helper text below the cells. */\n    helperText?: string;\n    /** Error message — turns cells red and replaces helperText. */\n    error?: string;\n    /** Disable all cells. */\n    disabled?: boolean;\n    /** Auto-focus the first cell on mount. Default `false`. */\n    autoFocus?: boolean;\n    /** id for the wrapping group label association. */\n    id?: string;\n    className?: string;\n}\n\nconst NUMERIC = /[0-9]/;\nconst ALNUM = /[A-Za-z0-9]/;\n\n/**\n * One-time-password style input — N independent cells, paste support, auto-\n * advance on input, backspace flows back, arrow keys navigate.\n *\n * @example\n * <PinInput length={6} type=\"numeric\" onComplete={(otp) => verify(otp)} />\n */\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>(function PinInput(\n    {\n        length = 6,\n        type = \"numeric\",\n        size = \"md\",\n        value,\n        defaultValue,\n        onChange,\n        onComplete,\n        masked = false,\n        label,\n        helperText,\n        error,\n        disabled = false,\n        autoFocus = false,\n        id,\n        className,\n    },\n    ref,\n) {\n    const internalId = useId();\n    const wrapperId = id ?? internalId;\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = useState<string>(defaultValue ?? \"\");\n    const current = isControlled ? (value ?? \"\") : internal;\n    const cells = Array.from({ length }, (_, index) => current[index] ?? \"\");\n    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n    const pattern = type === \"numeric\" ? NUMERIC : ALNUM;\n\n    useEffect(() => {\n        if (autoFocus) inputsRef.current[0]?.focus();\n    }, [autoFocus]);\n\n    const update = (next: string): void => {\n        const trimmed = next.slice(0, length);\n        if (!isControlled) setInternal(trimmed);\n        onChange?.(trimmed);\n        if (trimmed.length === length) onComplete?.(trimmed);\n    };\n\n    const focusCell = (index: number): void => {\n        const safe = Math.max(0, Math.min(length - 1, index));\n        inputsRef.current[safe]?.focus();\n        inputsRef.current[safe]?.select();\n    };\n\n    const onCellChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {\n        const char = event.target.value.slice(-1);\n        if (char && !pattern.test(char)) return;\n        const next = cells.slice();\n        next[index] = char;\n        update(next.join(\"\"));\n        if (char) focusCell(index + 1);\n    };\n\n    const onCellKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Backspace\") {\n            if (!cells[index] && index > 0) {\n                event.preventDefault();\n                const next = cells.slice();\n                next[index - 1] = \"\";\n                update(next.join(\"\"));\n                focusCell(index - 1);\n            }\n        } else if (event.key === \"ArrowLeft\") {\n            event.preventDefault();\n            focusCell(index - 1);\n        } else if (event.key === \"ArrowRight\") {\n            event.preventDefault();\n            focusCell(index + 1);\n        }\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n        const text = event.clipboardData\n            .getData(\"text\")\n            .split(\"\")\n            .filter((c) => pattern.test(c))\n            .join(\"\");\n        if (!text) return;\n        event.preventDefault();\n        update(text);\n        focusCell(Math.min(length - 1, text.length));\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={cn(styles.wrapper, error && styles.error, className)}\n            id={wrapperId}\n        >\n            {label && <label className={styles.label}>{label}</label>}\n            <div className={cn(styles.cells, styles[size])} role=\"group\" aria-label={label}>\n                {cells.map((cell, index) => (\n                    <input\n                        key={index}\n                        ref={(node) => {\n                            inputsRef.current[index] = node;\n                        }}\n                        type={masked ? \"password\" : \"text\"}\n                        inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n                        autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n                        maxLength={1}\n                        value={cell}\n                        disabled={disabled}\n                        className={styles.cell}\n                        aria-label={`Dígito ${index + 1}`}\n                        aria-invalid={!!error}\n                        onChange={onCellChange(index)}\n                        onKeyDown={onCellKeyDown(index)}\n                        onPaste={onPaste}\n                    />\n                ))}\n            </div>\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"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"}
+{"version":3,"file":"PinInput.cjs","names":["forwardRef","useId","useState","useRef","cn","styles","require_cn","require_PinInput_module","react","react_jsx_runtime","NUMERIC","ALNUM","PinInput","internalId","wrapperId","id","isControlled","value","internal","setInternal","defaultValue","current","cells","index","inputsRef","pattern","type","autoFocus","update","trimmed","next","length","onChange","onComplete","focusCell","safe","onCellChange","char","event","onCellKeyDown","onPaste","text","c","error","className","label","size","node","masked","cell","helperText"],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — one input per digit, so length,\n * type, masked and autoFocus shape the boxes while\n * value/defaultValue/onChange/onComplete drive them as a single value. The body owns\n * the per-box refs, paste distribution and backspace traversal, which only make\n * sense with the whole array in scope.\n */\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, KeyboardEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PinInput.module.css\";\n\nexport type PinInputType = \"numeric\" | \"alphanumeric\";\nexport type PinInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface PinInputProps {\n    /** Number of cells. Default `6`. */\n    length?: number;\n    /** Allowed character set. `numeric` (default) rejects letters, `alphanumeric` allows both. */\n    type?: PinInputType;\n    /** Visual size. Default `\"md\"`. */\n    size?: PinInputSize;\n    /** Controlled value. */\n    value?: string;\n    /** Initial value (uncontrolled mode). */\n    defaultValue?: string;\n    /** Fires on every change with the current concatenated value. */\n    onChange?: (value: string) => void;\n    /** Fires when the user fills the last cell. */\n    onComplete?: (value: string) => void;\n    /** Show characters obscured (`*`). Default `false`. */\n    masked?: boolean;\n    /** Label rendered above the cells. */\n    label?: string;\n    /** Helper text below the cells. */\n    helperText?: string;\n    /** Error message — turns cells red and replaces helperText. */\n    error?: string;\n    /** Disable all cells. */\n    disabled?: boolean;\n    /** Auto-focus the first cell on mount. Default `false`. */\n    autoFocus?: boolean;\n    /** id for the wrapping group label association. */\n    id?: string;\n    className?: string;\n}\n\nconst NUMERIC = /[0-9]/;\nconst ALNUM = /[A-Za-z0-9]/;\n\n/**\n * One-time-password style input — N independent cells, paste support, auto-\n * advance on input, backspace flows back, arrow keys navigate.\n *\n * @example\n * <PinInput length={6} type=\"numeric\" onComplete={(otp) => verify(otp)} />\n */\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>(function PinInput(\n    {\n        length = 6,\n        type = \"numeric\",\n        size = \"md\",\n        value,\n        defaultValue,\n        onChange,\n        onComplete,\n        masked = false,\n        label,\n        helperText,\n        error,\n        disabled = false,\n        autoFocus = false,\n        id,\n        className,\n    },\n    ref,\n) {\n    const internalId = useId();\n    const wrapperId = id ?? internalId;\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = useState<string>(defaultValue ?? \"\");\n    const current = isControlled ? (value ?? \"\") : internal;\n    const cells = Array.from({ length }, (_, index) => current[index] ?? \"\");\n    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n    const pattern = type === \"numeric\" ? NUMERIC : ALNUM;\n\n    useEffect(() => {\n        if (autoFocus) inputsRef.current[0]?.focus();\n    }, [autoFocus]);\n\n    const update = (next: string): void => {\n        const trimmed = next.slice(0, length);\n        if (!isControlled) setInternal(trimmed);\n        onChange?.(trimmed);\n        if (trimmed.length === length) onComplete?.(trimmed);\n    };\n\n    const focusCell = (index: number): void => {\n        const safe = Math.max(0, Math.min(length - 1, index));\n        inputsRef.current[safe]?.focus();\n        inputsRef.current[safe]?.select();\n    };\n\n    const onCellChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {\n        const char = event.target.value.slice(-1);\n        if (char && !pattern.test(char)) return;\n        const next = cells.slice();\n        next[index] = char;\n        update(next.join(\"\"));\n        if (char) focusCell(index + 1);\n    };\n\n    const onCellKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Backspace\") {\n            if (!cells[index] && index > 0) {\n                event.preventDefault();\n                const next = cells.slice();\n                next[index - 1] = \"\";\n                update(next.join(\"\"));\n                focusCell(index - 1);\n            }\n        } else if (event.key === \"ArrowLeft\") {\n            event.preventDefault();\n            focusCell(index - 1);\n        } else if (event.key === \"ArrowRight\") {\n            event.preventDefault();\n            focusCell(index + 1);\n        }\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n        const text = event.clipboardData\n            .getData(\"text\")\n            .split(\"\")\n            .filter((c) => pattern.test(c))\n            .join(\"\");\n        if (!text) return;\n        event.preventDefault();\n        update(text);\n        focusCell(Math.min(length - 1, text.length));\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={cn(styles.wrapper, error && styles.error, className)}\n            id={wrapperId}\n        >\n            {label && <label className={styles.label}>{label}</label>}\n            <div className={cn(styles.cells, styles[size])} role=\"group\" aria-label={label}>\n                {cells.map((cell, index) => (\n                    <input\n                        key={index}\n                        ref={(node) => {\n                            inputsRef.current[index] = node;\n                        }}\n                        type={masked ? \"password\" : \"text\"}\n                        inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n                        autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n                        maxLength={1}\n                        value={cell}\n                        disabled={disabled}\n                        className={styles.cell}\n                        aria-label={`Dígito ${index + 1}`}\n                        aria-invalid={!!error}\n                        onChange={onCellChange(index)}\n                        onKeyDown={onCellKeyDown(index)}\n                        onPaste={onPaste}\n                    />\n                ))}\n            </div>\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":"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"}

package/dist/components/PinInput/PinInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.js","names":[],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — one input per digit, so length,\n * type, masked and autoFocus shape the boxes while\n * value/defaultValue/onChange/onComplete drive them as a single value. The body owns\n * the per-box refs, paste distribution and backspace traversal, which only make\n * sense with the whole array in scope.\n */\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, KeyboardEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PinInput.module.css\";\n\nexport type PinInputType = \"numeric\" | \"alphanumeric\";\nexport type PinInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface PinInputProps {\n    /** Number of cells. Default `6`. */\n    length?: number;\n    /** Allowed character set. `numeric` (default) rejects letters, `alphanumeric` allows both. */\n    type?: PinInputType;\n    /** Visual size. Default `\"md\"`. */\n    size?: PinInputSize;\n    /** Controlled value. */\n    value?: string;\n    /** Initial value (uncontrolled mode). */\n    defaultValue?: string;\n    /** Fires on every change with the current concatenated value. */\n    onChange?: (value: string) => void;\n    /** Fires when the user fills the last cell. */\n    onComplete?: (value: string) => void;\n    /** Show characters obscured (`*`). Default `false`. */\n    masked?: boolean;\n    /** Label rendered above the cells. */\n    label?: string;\n    /** Helper text below the cells. */\n    helperText?: string;\n    /** Error message — turns cells red and replaces helperText. */\n    error?: string;\n    /** Disable all cells. */\n    disabled?: boolean;\n    /** Auto-focus the first cell on mount. Default `false`. */\n    autoFocus?: boolean;\n    /** id for the wrapping group label association. */\n    id?: string;\n    className?: string;\n}\n\nconst NUMERIC = /[0-9]/;\nconst ALNUM = /[A-Za-z0-9]/;\n\n/**\n * One-time-password style input — N independent cells, paste support, auto-\n * advance on input, backspace flows back, arrow keys navigate.\n *\n * @example\n * <PinInput length={6} type=\"numeric\" onComplete={(otp) => verify(otp)} />\n */\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>(function PinInput(\n    {\n        length = 6,\n        type = \"numeric\",\n        size = \"md\",\n        value,\n        defaultValue,\n        onChange,\n        onComplete,\n        masked = false,\n        label,\n        helperText,\n        error,\n        disabled = false,\n        autoFocus = false,\n        id,\n        className,\n    },\n    ref,\n) {\n    const internalId = useId();\n    const wrapperId = id ?? internalId;\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = useState<string>(defaultValue ?? \"\");\n    const current = isControlled ? (value ?? \"\") : internal;\n    const cells = Array.from({ length }, (_, index) => current[index] ?? \"\");\n    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n    const pattern = type === \"numeric\" ? NUMERIC : ALNUM;\n\n    useEffect(() => {\n        if (autoFocus) inputsRef.current[0]?.focus();\n    }, [autoFocus]);\n\n    const update = (next: string): void => {\n        const trimmed = next.slice(0, length);\n        if (!isControlled) setInternal(trimmed);\n        onChange?.(trimmed);\n        if (trimmed.length === length) onComplete?.(trimmed);\n    };\n\n    const focusCell = (index: number): void => {\n        const safe = Math.max(0, Math.min(length - 1, index));\n        inputsRef.current[safe]?.focus();\n        inputsRef.current[safe]?.select();\n    };\n\n    const onCellChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {\n        const char = event.target.value.slice(-1);\n        if (char && !pattern.test(char)) return;\n        const next = cells.slice();\n        next[index] = char;\n        update(next.join(\"\"));\n        if (char) focusCell(index + 1);\n    };\n\n    const onCellKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Backspace\") {\n            if (!cells[index] && index > 0) {\n                event.preventDefault();\n                const next = cells.slice();\n                next[index - 1] = \"\";\n                update(next.join(\"\"));\n                focusCell(index - 1);\n            }\n        } else if (event.key === \"ArrowLeft\") {\n            event.preventDefault();\n            focusCell(index - 1);\n        } else if (event.key === \"ArrowRight\") {\n            event.preventDefault();\n            focusCell(index + 1);\n        }\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n        const text = event.clipboardData\n            .getData(\"text\")\n            .split(\"\")\n            .filter((c) => pattern.test(c))\n            .join(\"\");\n        if (!text) return;\n        event.preventDefault();\n        update(text);\n        focusCell(Math.min(length - 1, text.length));\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={cn(styles.wrapper, error && styles.error, className)}\n            id={wrapperId}\n        >\n            {label && <label className={styles.label}>{label}</label>}\n            <div className={cn(styles.cells, styles[size])} role=\"group\" aria-label={label}>\n                {cells.map((cell, index) => (\n                    <input\n                        key={index}\n                        ref={(node) => {\n                            inputsRef.current[index] = node;\n                        }}\n                        type={masked ? \"password\" : \"text\"}\n                        inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n                        autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n                        maxLength={1}\n                        value={cell}\n                        disabled={disabled}\n                        className={styles.cell}\n                        aria-label={`Dígito ${index + 1}`}\n                        aria-invalid={!!error}\n                        onChange={onCellChange(index)}\n                        onKeyDown={onCellKeyDown(index)}\n                        onPaste={onPaste}\n                    />\n                ))}\n            </div>\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":";;;;;AA+CA,IAAM,IAAU,SACV,IAAQ,eASD,IAAW,EAA0C,SAC9D,EACI,YAAS,GACT,UAAO,WACP,UAAO,MACP,UACA,iBACA,aACA,eACA,YAAS,IACT,UACA,eACA,UACA,cAAW,IACX,eAAY,IACZ,OACA,gBAEJ,GACF;CACE,IAAM,IAAa,EAAM,GACnB,IAAY,KAAM,GAClB,IAAe,MAAU,KAAA,GACzB,CAAC,GAAU,KAAe,EAAiB,KAAgB,EAAE,GAC7D,IAAU,IAAgB,KAAS,KAAM,GACzC,IAAQ,MAAM,KAAK,EAAE,UAAO,IAAI,GAAG,MAAU,EAAQ,MAAU,EAAE,GACjE,IAAY,EAAoC,CAAC,CAAC,GAClD,IAAU,MAAS,YAAY,IAAU;CAE/C,QAAgB;EACZ,AAAI,KAAW,EAAU,QAAQ,EAAE,EAAE,MAAM;CAC/C,GAAG,CAAC,CAAS,CAAC;CAEd,IAAM,KAAU,MAAuB;EACnC,IAAM,IAAU,EAAK,MAAM,GAAG,CAAM;EAGpC,AAFK,KAAc,EAAY,CAAO,GACtC,IAAW,CAAO,GACd,EAAQ,WAAW,KAAQ,IAAa,CAAO;CACvD,GAEM,KAAa,MAAwB;EACvC,IAAM,IAAO,KAAK,IAAI,GAAG,KAAK,IAAI,IAAS,GAAG,CAAK,CAAC;EAEpD,AADA,EAAU,QAAQ,EAAK,EAAE,MAAM,GAC/B,EAAU,QAAQ,EAAK,EAAE,OAAO;CACpC,GAEM,KAAgB,OAAmB,MAAyC;EAC9E,IAAM,IAAO,EAAM,OAAO,MAAM,MAAM,EAAE;EACxC,IAAI,KAAQ,CAAC,EAAQ,KAAK,CAAI,GAAG;EACjC,IAAM,IAAO,EAAM,MAAM;EAGzB,AAFA,EAAK,KAAS,GACd,EAAO,EAAK,KAAK,EAAE,CAAC,GAChB,KAAM,EAAU,IAAQ,CAAC;CACjC,GAEM,KAAiB,OAAmB,MAA2C;EACjF,IAAI,EAAM,QAAQ,aACV;OAAA,CAAC,EAAM,MAAU,IAAQ,GAAG;IAC5B,EAAM,eAAe;IACrB,IAAM,IAAO,EAAM,MAAM;IAGzB,AAFA,EAAK,IAAQ,KAAK,IAClB,EAAO,EAAK,KAAK,EAAE,CAAC,GACpB,EAAU,IAAQ,CAAC;GACvB;SACG,AAAI,EAAM,QAAQ,eACrB,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAC,KACZ,EAAM,QAAQ,iBACrB,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAC;CAE3B,GAEM,KAAW,MAAkD;EAC/D,IAAM,IAAO,EAAM,cACd,QAAQ,MAAM,CAAC,CACf,MAAM,EAAE,CAAC,CACT,QAAQ,MAAM,EAAQ,KAAK,CAAC,CAAC,CAAC,CAC9B,KAAK,EAAE;EACP,MACL,EAAM,eAAe,GACrB,EAAO,CAAI,GACX,EAAU,KAAK,IAAI,IAAS,GAAG,EAAK,MAAM,CAAC;CAC/C;CAEA,OACI,kBAAC,OAAD;EACS;EACL,WAAW,EAAG,EAAO,SAAS,KAAS,EAAO,OAAO,CAAS;EAC9D,IAAI;EAHR,UAAA;GAKK,KAAS,kBAAC,SAAD;IAAO,WAAW,EAAO;IAAQ,UAAA;GAAa,CAAA;GACxD,kBAAC,OAAD;IAAK,WAAW,EAAG,EAAO,OAAO,EAAO,EAAK;IAAG,MAAK;IAAQ,cAAY;IACpE,UAAA,EAAM,KAAK,GAAM,MACd,kBAAC,SAAD;KAEI,MAAM,MAAS;MACX,EAAU,QAAQ,KAAS;KAC/B;KACA,MAAM,IAAS,aAAa;KAC5B,WAAW,MAAS,YAAY,YAAY;KAC5C,cAAc,MAAU,IAAI,kBAAkB;KAC9C,WAAW;KACX,OAAO;KACG;KACV,WAAW,EAAO;KAClB,cAAY,UAAU,IAAQ;KAC9B,gBAAc,CAAC,CAAC;KAChB,UAAU,EAAa,CAAK;KAC5B,WAAW,EAAc,CAAK;KACrB;IACZ,GAhBQ,CAgBR,CACJ;GACA,CAAA;GACJ,IACG,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAY,UAAA;GAAY,CAAA,IAChD,IACA,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAS,UAAA;GAAiB,CAAA,IAClD;EACH;;AAEb,CAAC"}
+{"version":3,"file":"PinInput.js","names":["styles","PinInput_module_default","NUMERIC","ALNUM","PinInput","forwardRef","internalId","useId","wrapperId","id","isControlled","value","internal","setInternal","useState","defaultValue","current","cells","index","inputsRef","useRef","pattern","type","autoFocus","update","trimmed","next","length","onChange","onComplete","focusCell","safe","onCellChange","char","event","onCellKeyDown","onPaste","text","c","cn","error","className","label","size","node","masked","cell","helperText"],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count, function-lines — one input per digit, so length,\n * type, masked and autoFocus shape the boxes while\n * value/defaultValue/onChange/onComplete drive them as a single value. The body owns\n * the per-box refs, paste distribution and backspace traversal, which only make\n * sense with the whole array in scope.\n */\nimport { forwardRef, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, KeyboardEvent } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./PinInput.module.css\";\n\nexport type PinInputType = \"numeric\" | \"alphanumeric\";\nexport type PinInputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface PinInputProps {\n    /** Number of cells. Default `6`. */\n    length?: number;\n    /** Allowed character set. `numeric` (default) rejects letters, `alphanumeric` allows both. */\n    type?: PinInputType;\n    /** Visual size. Default `\"md\"`. */\n    size?: PinInputSize;\n    /** Controlled value. */\n    value?: string;\n    /** Initial value (uncontrolled mode). */\n    defaultValue?: string;\n    /** Fires on every change with the current concatenated value. */\n    onChange?: (value: string) => void;\n    /** Fires when the user fills the last cell. */\n    onComplete?: (value: string) => void;\n    /** Show characters obscured (`*`). Default `false`. */\n    masked?: boolean;\n    /** Label rendered above the cells. */\n    label?: string;\n    /** Helper text below the cells. */\n    helperText?: string;\n    /** Error message — turns cells red and replaces helperText. */\n    error?: string;\n    /** Disable all cells. */\n    disabled?: boolean;\n    /** Auto-focus the first cell on mount. Default `false`. */\n    autoFocus?: boolean;\n    /** id for the wrapping group label association. */\n    id?: string;\n    className?: string;\n}\n\nconst NUMERIC = /[0-9]/;\nconst ALNUM = /[A-Za-z0-9]/;\n\n/**\n * One-time-password style input — N independent cells, paste support, auto-\n * advance on input, backspace flows back, arrow keys navigate.\n *\n * @example\n * <PinInput length={6} type=\"numeric\" onComplete={(otp) => verify(otp)} />\n */\nexport const PinInput = forwardRef<HTMLDivElement, PinInputProps>(function PinInput(\n    {\n        length = 6,\n        type = \"numeric\",\n        size = \"md\",\n        value,\n        defaultValue,\n        onChange,\n        onComplete,\n        masked = false,\n        label,\n        helperText,\n        error,\n        disabled = false,\n        autoFocus = false,\n        id,\n        className,\n    },\n    ref,\n) {\n    const internalId = useId();\n    const wrapperId = id ?? internalId;\n    const isControlled = value !== undefined;\n    const [internal, setInternal] = useState<string>(defaultValue ?? \"\");\n    const current = isControlled ? (value ?? \"\") : internal;\n    const cells = Array.from({ length }, (_, index) => current[index] ?? \"\");\n    const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n    const pattern = type === \"numeric\" ? NUMERIC : ALNUM;\n\n    useEffect(() => {\n        if (autoFocus) inputsRef.current[0]?.focus();\n    }, [autoFocus]);\n\n    const update = (next: string): void => {\n        const trimmed = next.slice(0, length);\n        if (!isControlled) setInternal(trimmed);\n        onChange?.(trimmed);\n        if (trimmed.length === length) onComplete?.(trimmed);\n    };\n\n    const focusCell = (index: number): void => {\n        const safe = Math.max(0, Math.min(length - 1, index));\n        inputsRef.current[safe]?.focus();\n        inputsRef.current[safe]?.select();\n    };\n\n    const onCellChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {\n        const char = event.target.value.slice(-1);\n        if (char && !pattern.test(char)) return;\n        const next = cells.slice();\n        next[index] = char;\n        update(next.join(\"\"));\n        if (char) focusCell(index + 1);\n    };\n\n    const onCellKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Backspace\") {\n            if (!cells[index] && index > 0) {\n                event.preventDefault();\n                const next = cells.slice();\n                next[index - 1] = \"\";\n                update(next.join(\"\"));\n                focusCell(index - 1);\n            }\n        } else if (event.key === \"ArrowLeft\") {\n            event.preventDefault();\n            focusCell(index - 1);\n        } else if (event.key === \"ArrowRight\") {\n            event.preventDefault();\n            focusCell(index + 1);\n        }\n    };\n\n    const onPaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n        const text = event.clipboardData\n            .getData(\"text\")\n            .split(\"\")\n            .filter((c) => pattern.test(c))\n            .join(\"\");\n        if (!text) return;\n        event.preventDefault();\n        update(text);\n        focusCell(Math.min(length - 1, text.length));\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={cn(styles.wrapper, error && styles.error, className)}\n            id={wrapperId}\n        >\n            {label && <label className={styles.label}>{label}</label>}\n            <div className={cn(styles.cells, styles[size])} role=\"group\" aria-label={label}>\n                {cells.map((cell, index) => (\n                    <input\n                        key={index}\n                        ref={(node) => {\n                            inputsRef.current[index] = node;\n                        }}\n                        type={masked ? \"password\" : \"text\"}\n                        inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n                        autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n                        maxLength={1}\n                        value={cell}\n                        disabled={disabled}\n                        className={styles.cell}\n                        aria-label={`Dígito ${index + 1}`}\n                        aria-invalid={!!error}\n                        onChange={onCellChange(index)}\n                        onKeyDown={onCellKeyDown(index)}\n                        onPaste={onPaste}\n                    />\n                ))}\n            </div>\n            {error ? (\n                <span className={styles.errorText}>{error}</span>\n            ) : helperText ? (\n                <span className={styles.helper}>{helperText}</span>\n            ) : null}\n        </div>\n    );\n});\n"],"mappings":";;;;;AA+CA,IAAME,IAAU,SACVC,IAAQ,eASDC,IAAWC,EAA0C,SAC9D,EACI,YAAS,GACT,UAAO,WACP,UAAO,MACP,UACA,iBACA,aACA,eACA,YAAS,IACT,UACA,eACA,UACA,cAAW,IACX,eAAY,IACZ,OACA,gBAEJ,GACF;CACE,IAAMC,IAAaC,EAAM,GACnBC,IAAYC,KAAMH,GAClBI,IAAeC,MAAU,KAAA,GACzB,CAACC,GAAUC,KAAeC,EAAiBC,KAAgB,EAAE,GAC7DC,IAAUN,IAAgBC,KAAS,KAAMC,GACzCK,IAAQ,MAAM,KAAK,EAAE,UAAO,IAAI,GAAG,MAAUD,EAAQE,MAAU,EAAE,GACjEC,IAAYC,EAAoC,CAAC,CAAC,GAClDC,IAAUC,MAAS,YAAYpB,IAAUC;CAE/C,QAAgB;EACZ,AAAIoB,KAAWJ,EAAU,QAAQ,EAAE,EAAE,MAAM;CAC/C,GAAG,CAACI,CAAS,CAAC;CAEd,IAAMC,KAAU,MAAuB;EACnC,IAAMC,IAAUC,EAAK,MAAM,GAAGC,CAAM;EAGpC,AAFKjB,KAAcG,EAAYY,CAAO,GACtCG,IAAWH,CAAO,GACdA,EAAQ,WAAWE,KAAQE,IAAaJ,CAAO;CACvD,GAEMK,KAAa,MAAwB;EACvC,IAAMC,IAAO,KAAK,IAAI,GAAG,KAAK,IAAIJ,IAAS,GAAGT,CAAK,CAAC;EAEpD,AADAC,EAAU,QAAQY,EAAK,EAAE,MAAM,GAC/BZ,EAAU,QAAQY,EAAK,EAAE,OAAO;CACpC,GAEMC,KAAgB,OAAmB,MAAyC;EAC9E,IAAMC,IAAOC,EAAM,OAAO,MAAM,MAAM,EAAE;EACxC,IAAID,KAAQ,CAACZ,EAAQ,KAAKY,CAAI,GAAG;EACjC,IAAMP,IAAOT,EAAM,MAAM;EAGzB,AAFA,EAAKC,KAASe,GACdT,EAAOE,EAAK,KAAK,EAAE,CAAC,GAChBO,KAAMH,EAAUZ,IAAQ,CAAC;CACjC,GAEMiB,KAAiB,OAAmB,MAA2C;EACjF,IAAID,EAAM,QAAQ,aACV;OAAA,CAACjB,EAAMC,MAAUA,IAAQ,GAAG;IAC5B,EAAM,eAAe;IACrB,IAAMQ,IAAOT,EAAM,MAAM;IAGzB,AAFA,EAAKC,IAAQ,KAAK,IAClBM,EAAOE,EAAK,KAAK,EAAE,CAAC,GACpBI,EAAUZ,IAAQ,CAAC;GACvB;SACG,AAAIgB,EAAM,QAAQ,eACrBA,EAAM,eAAe,GACrBJ,EAAUZ,IAAQ,CAAC,KACZgB,EAAM,QAAQ,iBACrBA,EAAM,eAAe,GACrBJ,EAAUZ,IAAQ,CAAC;CAE3B,GAEMkB,KAAW,MAAkD;EAC/D,IAAMC,IAAOH,EAAM,cACd,QAAQ,MAAM,CAAC,CACf,MAAM,EAAE,CAAC,CACT,QAAQ,MAAMb,EAAQ,KAAKiB,CAAC,CAAC,CAAC,CAC9B,KAAK,EAAE;EACZ,AAAKD,MACLH,EAAM,eAAe,GACrBV,EAAOa,CAAI,GACXP,EAAU,KAAK,IAAIH,IAAS,GAAGU,EAAK,MAAM,CAAC;CAC/C;CAEA,OACI,kBAAC,OAAD;EACS;EACL,WAAWE,EAAGvC,EAAO,SAASwC,KAASxC,EAAO,OAAOyC,CAAS;EAC9D,IAAIjC;EAHR,UAAA;GAKKkC,KAAS,kBAAC,SAAD;IAAO,WAAW1C,EAAO;IAAQ,UAAA0C;GAAa,CAAA;GACxD,kBAAC,OAAD;IAAK,WAAWH,EAAGvC,EAAO,OAAOA,EAAO2C,EAAK;IAAG,MAAK;IAAQ,cAAYD;IACpE,UAAAzB,EAAM,KAAK,GAAM,MACd,kBAAC,SAAD;KAEI,MAAM,MAAS;MACX,EAAU,QAAQC,KAAS0B;KAC/B;KACA,MAAMC,IAAS,aAAa;KAC5B,WAAWvB,MAAS,YAAY,YAAY;KAC5C,cAAcJ,MAAU,IAAI,kBAAkB;KAC9C,WAAW;KACX,OAAO4B;KACG;KACV,WAAW9C,EAAO;KAClB,cAAY,UAAUkB,IAAQ;KAC9B,gBAAc,CAAC,CAACsB;KAChB,UAAUR,EAAad,CAAK;KAC5B,WAAWiB,EAAcjB,CAAK;KACrB;IACZ,GAhBQA,CAgBR,CACJ;GACA,CAAA;GACJsB,IACG,kBAAC,QAAD;IAAM,WAAWxC,EAAO;IAAY,UAAAwC;GAAY,CAAA,IAChDO,IACA,kBAAC,QAAD;IAAM,WAAW/C,EAAO;IAAS,UAAA+C;GAAiB,CAAA,IAClD;EACH;;AAEb,CAAC"}

package/dist/components/PinInput/PinInput.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.module.cjs","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}
+{"version":3,"file":"PinInput.module.cjs","names":["wrapper","label","cells","cell","sm","md","lg","error","helper","errorText","PinInput_module_default"],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}

package/dist/components/PinInput/PinInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"PinInput.module.js","names":[],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}
+{"version":3,"file":"PinInput.module.js","names":["wrapper","label","cells","cell","sm","md","lg","error","helper","errorText","PinInput_module_default"],"sources":["../../../src/components/PinInput/PinInput.module.css"],"sourcesContent":[".wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n}\n\n.label {\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    color: var(--tempest-text);\n}\n\n.cells {\n    display: flex;\n    gap: var(--tempest-space-2);\n}\n\n.cell {\n    flex: 0 0 auto;\n    text-align: center;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-mono, var(--tempest-font-sans));\n    transition: border-color var(--tempest-duration-fast, 120ms);\n}\n\n.cells.sm .cell {\n    width: 32px;\n    height: 36px;\n    font-size: var(--tempest-text-md);\n}\n\n.cells.md .cell {\n    width: 44px;\n    height: 52px;\n    font-size: var(--tempest-text-lg);\n}\n\n.cells.lg .cell {\n    width: 56px;\n    height: 64px;\n    font-size: var(--tempest-text-xl);\n}\n\n.cell:focus {\n    outline: none;\n    border-color: var(--tempest-primary);\n    box-shadow: 0 0 0 var(--tempest-focus-ring-width, 2px)\n        var(--tempest-focus-ring-color, currentColor);\n}\n\n.cell:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.error .cell {\n    border-color: var(--tempest-danger-border, var(--tempest-danger));\n}\n\n.helper {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-text-muted);\n}\n\n.errorText {\n    font-size: var(--tempest-text-xs);\n    color: var(--tempest-danger-fg, var(--tempest-danger));\n}\n"],"mappings":";"}

package/dist/components/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — trigger and children are the two halves, placement\n * is where it lands, portal is whether it escapes the tree, and open/onOpenChange/defaultOpen is the standard controlled-\n * or-not pair. closeOnEsc and closeOnOutsideClick are separate because a popover\n * holding a form wants one and not the other.\n */\nimport { useCallback, useEffect, useId, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Popover.module.css\";\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopoverProps {\n    /** Trigger element. Receives `onClick`/`aria-expanded`/`aria-controls`. */\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        \"aria-expanded\"?: boolean;\n        \"aria-controls\"?: string;\n    }>;\n    children: ReactNode;\n    placement?: PopoverPlacement;\n    /**\n     * Render the panel in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, any ancestor with `overflow` other than `visible` clips the panel —\n     * inside a `DataTable` cell only 3% of it was visible (measured in Chrome at\n     * 1440 px). In a portal it escapes the clip, flips to the opposite side when\n     * the requested one has no room, and follows the trigger on scroll and resize.\n     * `false` keeps the in-flow panel.\n     */\n    portal?: boolean;\n    /** Controlled open state. */\n    open?: boolean;\n    /** Called when the user toggles or dismisses. */\n    onOpenChange?: (open: boolean) => void;\n    /** Default open state for uncontrolled usage. */\n    defaultOpen?: boolean;\n    /** Close on Escape. Default true. */\n    closeOnEsc?: boolean;\n    /** Close on outside click. Default true. */\n    closeOnOutsideClick?: boolean;\n    className?: string;\n}\n\n/** Gap between trigger and panel, in px — the in-flow CSS uses the same 8 px. */\nconst POPOVER_OFFSET = 8;\n\n/**\n * Lightweight popover. Renders a panel anchored to a trigger, dismissed on\n * outside click / Escape.\n *\n * Portalled by default, with viewport-aware placement: the panel flips to the\n * opposite side when the requested one overflows, and is clamped inside the\n * viewport otherwise.\n */\nexport function Popover({\n    trigger,\n    children,\n    placement = \"bottom\",\n    portal = true,\n    open,\n    onOpenChange,\n    defaultOpen = false,\n    closeOnEsc = true,\n    closeOnOutsideClick = true,\n    className,\n}: PopoverProps) {\n    const isControlled = open !== undefined;\n    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);\n    const isOpen = isControlled ? open : internalOpen;\n    const id = useId();\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [panelNode, setPanelNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: panelNode,\n        side: placement,\n        align: \"center\",\n        offset: POPOVER_OFFSET,\n        enabled: portal && isOpen,\n    });\n    usePortalTabOrder({ enabled: portal && isOpen, anchor: rootNode, panel: panelNode });\n\n    const setOpen = useCallback(\n        (next: boolean): void => {\n            if (!isControlled) setInternalOpen(next);\n            onOpenChange?.(next);\n        },\n        [isControlled, onOpenChange],\n    );\n\n    useEscapeLayer(isOpen && closeOnEsc, () => setOpen(false));\n\n    /**\n     * Dismiss on a press outside both trigger and panel.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * trigger's wrapper, and a press inside it — on a form field, say — would\n     * otherwise count as outside.\n     */\n    useEffect(() => {\n        if (!isOpen) return;\n        const onDown = (event: MouseEvent): void => {\n            if (!closeOnOutsideClick) return;\n            const target = event.target as Node;\n            if (rootNode?.contains(target) || panelNode?.contains(target)) return;\n            setOpen(false);\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [isOpen, closeOnOutsideClick, setOpen, rootNode, panelNode]);\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        setOpen(!isOpen);\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            \"aria-expanded\": isOpen,\n            \"aria-controls\": id,\n        },\n    } as ReactElement;\n\n    const panel = (\n        <div\n            ref={setPanelNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.popover, portal ? styles.portalled : styles[placement], className)}\n            style={floatingStyle}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span ref={setRootNode} className={styles.root}>\n            {triggerClone}\n            {isOpen && (portal ? <Portal>{panel}</Portal> : panel)}\n        </span>\n    );\n}\n"],"mappings":"yRAkDA,IAAM,EAAiB,EAUvB,SAAgB,EAAQ,CACpB,UACA,WACA,YAAY,SACZ,SAAS,GACT,OACA,eACA,cAAc,GACd,aAAa,GACb,sBAAsB,GACtB,aACa,CACb,IAAM,EAAe,IAAS,IAAA,GACxB,CAAC,EAAc,IAAA,EAAmB,EAAA,SAAA,CAAkB,CAAW,EAC/D,EAAS,EAAe,EAAO,EAC/B,GAAA,EAAK,EAAA,MAAA,CAAM,EACX,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAiC,IAAI,EAC/D,CAAC,EAAW,IAAA,EAAgB,EAAA,SAAA,CAAgC,IAAI,EAChE,EAAgB,EAAA,kBAAkB,CACpC,OAAQ,EACR,SAAU,EACV,KAAM,EACN,MAAO,SACP,OAAQ,EACR,QAAS,GAAU,CACvB,CAAC,EACD,EAAA,kBAAkB,CAAE,QAAS,GAAU,EAAQ,OAAQ,EAAU,MAAO,CAAU,CAAC,EAEnF,IAAM,GAAA,EAAU,EAAA,YAAA,CACX,GAAwB,CAChB,GAAc,EAAgB,CAAI,EACvC,IAAe,CAAI,CACvB,EACA,CAAC,EAAc,CAAY,CAC/B,EAEA,EAAA,eAAe,GAAU,MAAkB,EAAQ,EAAK,CAAC,GASzD,EAAA,EAAA,UAAA,KAAgB,CACZ,GAAI,CAAC,EAAQ,OACb,IAAM,EAAU,GAA4B,CACxC,GAAI,CAAC,EAAqB,OAC1B,IAAM,EAAS,EAAM,OACjB,GAAU,SAAS,CAAM,GAAK,GAAW,SAAS,CAAM,GAC5D,EAAQ,EAAK,CACjB,EAEA,OADA,OAAO,iBAAiB,YAAa,CAAM,MAC9B,CACT,OAAO,oBAAoB,YAAa,CAAM,CAClD,CACJ,EAAG,CAAC,EAAQ,EAAqB,EAAS,EAAU,CAAS,CAAC,EAE9D,IAAM,EAAsB,GAAkC,CAC1D,EAAQ,MAAM,UAAU,CAAK,EAC7B,EAAQ,CAAC,CAAM,CACnB,EAEM,EAAe,CACjB,GAAG,EACH,MAAO,CACH,GAAG,EAAQ,MACX,QAAS,EACT,gBAAiB,EACjB,gBAAiB,CACrB,CACJ,EAEM,GACF,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACD,KACJ,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,QAAO,QAAS,EAAS,EAAA,QAAO,UAAY,EAAA,QAAO,GAAY,CAAS,EACtF,MAAO,EAEN,UACA,CAAA,EAGT,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,IAAK,EAAa,UAAW,EAAA,QAAO,KAA1C,SAAA,CACK,EACA,IAAW,GAAS,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAA,SAAS,CAAc,CAAA,EAAI,EAC9C,GAEd"}
+{"version":3,"file":"Popover.cjs","names":["useState","useId","useAnchorPosition","useCallback","cn","styles","Portal","require_cn","require_escape_layer","require_Portal","require_anchor_position","require_tab_bridge","require_Popover_module","react","react_jsx_runtime","POPOVER_OFFSET","Popover","isControlled","open","internalOpen","setInternalOpen","defaultOpen","isOpen","id","rootNode","setRootNode","panelNode","setPanelNode","floatingStyle","placement","portal","setOpen","next","onOpenChange","closeOnEsc","onDown","closeOnOutsideClick","target","event","handleTriggerClick","trigger","triggerClone","panel","className"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — trigger and children are the two halves, placement\n * is where it lands, portal is whether it escapes the tree, and open/onOpenChange/defaultOpen is the standard controlled-\n * or-not pair. closeOnEsc and closeOnOutsideClick are separate because a popover\n * holding a form wants one and not the other.\n */\nimport { useCallback, useEffect, useId, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Popover.module.css\";\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopoverProps {\n    /** Trigger element. Receives `onClick`/`aria-expanded`/`aria-controls`. */\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        \"aria-expanded\"?: boolean;\n        \"aria-controls\"?: string;\n    }>;\n    children: ReactNode;\n    placement?: PopoverPlacement;\n    /**\n     * Render the panel in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, any ancestor with `overflow` other than `visible` clips the panel —\n     * inside a `DataTable` cell only 3% of it was visible (measured in Chrome at\n     * 1440 px). In a portal it escapes the clip, flips to the opposite side when\n     * the requested one has no room, and follows the trigger on scroll and resize.\n     * `false` keeps the in-flow panel.\n     */\n    portal?: boolean;\n    /** Controlled open state. */\n    open?: boolean;\n    /** Called when the user toggles or dismisses. */\n    onOpenChange?: (open: boolean) => void;\n    /** Default open state for uncontrolled usage. */\n    defaultOpen?: boolean;\n    /** Close on Escape. Default true. */\n    closeOnEsc?: boolean;\n    /** Close on outside click. Default true. */\n    closeOnOutsideClick?: boolean;\n    className?: string;\n}\n\n/** Gap between trigger and panel, in px — the in-flow CSS uses the same 8 px. */\nconst POPOVER_OFFSET = 8;\n\n/**\n * Lightweight popover. Renders a panel anchored to a trigger, dismissed on\n * outside click / Escape.\n *\n * Portalled by default, with viewport-aware placement: the panel flips to the\n * opposite side when the requested one overflows, and is clamped inside the\n * viewport otherwise.\n */\nexport function Popover({\n    trigger,\n    children,\n    placement = \"bottom\",\n    portal = true,\n    open,\n    onOpenChange,\n    defaultOpen = false,\n    closeOnEsc = true,\n    closeOnOutsideClick = true,\n    className,\n}: PopoverProps) {\n    const isControlled = open !== undefined;\n    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);\n    const isOpen = isControlled ? open : internalOpen;\n    const id = useId();\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [panelNode, setPanelNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: panelNode,\n        side: placement,\n        align: \"center\",\n        offset: POPOVER_OFFSET,\n        enabled: portal && isOpen,\n    });\n    usePortalTabOrder({ enabled: portal && isOpen, anchor: rootNode, panel: panelNode });\n\n    const setOpen = useCallback(\n        (next: boolean): void => {\n            if (!isControlled) setInternalOpen(next);\n            onOpenChange?.(next);\n        },\n        [isControlled, onOpenChange],\n    );\n\n    useEscapeLayer(isOpen && closeOnEsc, () => setOpen(false));\n\n    /**\n     * Dismiss on a press outside both trigger and panel.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * trigger's wrapper, and a press inside it — on a form field, say — would\n     * otherwise count as outside.\n     */\n    useEffect(() => {\n        if (!isOpen) return;\n        const onDown = (event: MouseEvent): void => {\n            if (!closeOnOutsideClick) return;\n            const target = event.target as Node;\n            if (rootNode?.contains(target) || panelNode?.contains(target)) return;\n            setOpen(false);\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [isOpen, closeOnOutsideClick, setOpen, rootNode, panelNode]);\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        setOpen(!isOpen);\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            \"aria-expanded\": isOpen,\n            \"aria-controls\": id,\n        },\n    } as ReactElement;\n\n    const panel = (\n        <div\n            ref={setPanelNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.popover, portal ? styles.portalled : styles[placement], className)}\n            style={floatingStyle}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span ref={setRootNode} className={styles.root}>\n            {triggerClone}\n            {isOpen && (portal ? <Portal>{panel}</Portal> : panel)}\n        </span>\n    );\n}\n"],"mappings":"A,yRAkDA,IAAMe,EAAiB,EAUvB,SAAgBC,EAAQ,CACpB,UACA,WACA,YAAY,SACZ,SAAS,GACT,OACA,eACA,cAAc,GACd,aAAa,GACb,sBAAsB,GACtB,aACa,CACb,IAAMC,EAAeC,IAAS,IAAA,GACxB,CAACC,EAAcC,IAAA,EAAmBpB,EAAAA,SAAAA,CAAkBqB,CAAW,EAC/DC,EAASL,EAAeC,EAAOC,EAC/BI,GAAA,EAAKtB,EAAAA,MAAAA,CAAM,EACX,CAACuB,EAAUC,IAAA,EAAezB,EAAAA,SAAAA,CAAiC,IAAI,EAC/D,CAAC0B,EAAWC,IAAA,EAAgB3B,EAAAA,SAAAA,CAAgC,IAAI,EAChE4B,EAAgB1B,EAAAA,kBAAkB,CACpC,OAAQsB,EACR,SAAUE,EACV,KAAMG,EACN,MAAO,SACP,OAAQd,EACR,QAASe,GAAUR,CACvB,CAAC,EACDX,EAAA,kBAAkB,CAAE,QAASmB,GAAUR,EAAQ,OAAQE,EAAU,MAAOE,CAAU,CAAC,EAEnF,IAAMK,GAAA,EAAU5B,EAAAA,YAAAA,CACX,GAAwB,CAChBc,GAAcG,EAAgBY,CAAI,EACvCC,IAAeD,CAAI,CACvB,EACA,CAACf,EAAcgB,CAAY,CAC/B,EAEAzB,EAAA,eAAec,GAAUY,MAAkBH,EAAQ,EAAK,CAAC,GASzD,EAAAlB,EAAA,UAAA,KAAgB,CACZ,GAAI,CAACS,EAAQ,OACb,IAAMa,EAAU,GAA4B,CACxC,GAAI,CAACC,EAAqB,OAC1B,IAAMC,EAASC,EAAM,OACjBd,GAAU,SAASa,CAAM,GAAKX,GAAW,SAASW,CAAM,GAC5DN,EAAQ,EAAK,CACjB,EAEA,OADA,OAAO,iBAAiB,YAAaI,CAAM,MAC9B,CACT,OAAO,oBAAoB,YAAaA,CAAM,CAClD,CACJ,EAAG,CAACb,EAAQc,EAAqBL,EAASP,EAAUE,CAAS,CAAC,EAE9D,IAAMa,EAAsB,GAAkC,CAC1DC,EAAQ,MAAM,UAAUF,CAAK,EAC7BP,EAAQ,CAACT,CAAM,CACnB,EAEMmB,EAAe,CACjB,GAAGD,EACH,MAAO,CACH,GAAGA,EAAQ,MACX,QAASD,EACT,gBAAiBjB,EACjB,gBAAiBC,CACrB,CACJ,EAEMmB,GACF,EAAA5B,EAAA,IAAA,CAAC,MAAD,CACI,IAAKa,EACD,KACJ,KAAK,SACL,UAAWvB,EAAAA,GAAGC,EAAAA,QAAO,QAASyB,EAASzB,EAAAA,QAAO,UAAYA,EAAAA,QAAOwB,GAAYc,CAAS,EACtF,MAAOf,EAEN,UACA,CAAA,EAGT,OACI,EAAAd,EAAA,KAAA,CAAC,OAAD,CAAM,IAAKW,EAAa,UAAWpB,EAAAA,QAAO,KAA1C,SAAA,CACKoC,EACAnB,IAAWQ,GAAS,EAAAhB,EAAA,IAAA,CAACR,EAAAA,OAAD,CAAA,SAASoC,CAAc,CAAA,EAAIA,EAC9C,C,EAEd,C"}

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — trigger and children are the two halves, placement\n * is where it lands, portal is whether it escapes the tree, and open/onOpenChange/defaultOpen is the standard controlled-\n * or-not pair. closeOnEsc and closeOnOutsideClick are separate because a popover\n * holding a form wants one and not the other.\n */\nimport { useCallback, useEffect, useId, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Popover.module.css\";\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopoverProps {\n    /** Trigger element. Receives `onClick`/`aria-expanded`/`aria-controls`. */\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        \"aria-expanded\"?: boolean;\n        \"aria-controls\"?: string;\n    }>;\n    children: ReactNode;\n    placement?: PopoverPlacement;\n    /**\n     * Render the panel in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, any ancestor with `overflow` other than `visible` clips the panel —\n     * inside a `DataTable` cell only 3% of it was visible (measured in Chrome at\n     * 1440 px). In a portal it escapes the clip, flips to the opposite side when\n     * the requested one has no room, and follows the trigger on scroll and resize.\n     * `false` keeps the in-flow panel.\n     */\n    portal?: boolean;\n    /** Controlled open state. */\n    open?: boolean;\n    /** Called when the user toggles or dismisses. */\n    onOpenChange?: (open: boolean) => void;\n    /** Default open state for uncontrolled usage. */\n    defaultOpen?: boolean;\n    /** Close on Escape. Default true. */\n    closeOnEsc?: boolean;\n    /** Close on outside click. Default true. */\n    closeOnOutsideClick?: boolean;\n    className?: string;\n}\n\n/** Gap between trigger and panel, in px — the in-flow CSS uses the same 8 px. */\nconst POPOVER_OFFSET = 8;\n\n/**\n * Lightweight popover. Renders a panel anchored to a trigger, dismissed on\n * outside click / Escape.\n *\n * Portalled by default, with viewport-aware placement: the panel flips to the\n * opposite side when the requested one overflows, and is clamped inside the\n * viewport otherwise.\n */\nexport function Popover({\n    trigger,\n    children,\n    placement = \"bottom\",\n    portal = true,\n    open,\n    onOpenChange,\n    defaultOpen = false,\n    closeOnEsc = true,\n    closeOnOutsideClick = true,\n    className,\n}: PopoverProps) {\n    const isControlled = open !== undefined;\n    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);\n    const isOpen = isControlled ? open : internalOpen;\n    const id = useId();\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [panelNode, setPanelNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: panelNode,\n        side: placement,\n        align: \"center\",\n        offset: POPOVER_OFFSET,\n        enabled: portal && isOpen,\n    });\n    usePortalTabOrder({ enabled: portal && isOpen, anchor: rootNode, panel: panelNode });\n\n    const setOpen = useCallback(\n        (next: boolean): void => {\n            if (!isControlled) setInternalOpen(next);\n            onOpenChange?.(next);\n        },\n        [isControlled, onOpenChange],\n    );\n\n    useEscapeLayer(isOpen && closeOnEsc, () => setOpen(false));\n\n    /**\n     * Dismiss on a press outside both trigger and panel.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * trigger's wrapper, and a press inside it — on a form field, say — would\n     * otherwise count as outside.\n     */\n    useEffect(() => {\n        if (!isOpen) return;\n        const onDown = (event: MouseEvent): void => {\n            if (!closeOnOutsideClick) return;\n            const target = event.target as Node;\n            if (rootNode?.contains(target) || panelNode?.contains(target)) return;\n            setOpen(false);\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [isOpen, closeOnOutsideClick, setOpen, rootNode, panelNode]);\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        setOpen(!isOpen);\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            \"aria-expanded\": isOpen,\n            \"aria-controls\": id,\n        },\n    } as ReactElement;\n\n    const panel = (\n        <div\n            ref={setPanelNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.popover, portal ? styles.portalled : styles[placement], className)}\n            style={floatingStyle}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span ref={setRootNode} className={styles.root}>\n            {triggerClone}\n            {isOpen && (portal ? <Portal>{panel}</Portal> : panel)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;;AAkDA,IAAM,IAAiB;AAUvB,SAAgB,EAAQ,EACpB,YACA,aACA,eAAY,UACZ,YAAS,IACT,SACA,iBACA,iBAAc,IACd,gBAAa,IACb,yBAAsB,IACtB,gBACa;CACb,IAAM,IAAe,MAAS,KAAA,GACxB,CAAC,GAAc,KAAmB,EAAkB,CAAW,GAC/D,IAAS,IAAe,IAAO,GAC/B,IAAK,EAAM,GACX,CAAC,GAAU,KAAe,EAAiC,IAAI,GAC/D,CAAC,GAAW,KAAgB,EAAgC,IAAI,GAChE,IAAgB,EAAkB;EACpC,QAAQ;EACR,UAAU;EACV,MAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAS,KAAU;CACvB,CAAC;CACD,EAAkB;EAAE,SAAS,KAAU;EAAQ,QAAQ;EAAU,OAAO;CAAU,CAAC;CAEnF,IAAM,IAAU,GACX,MAAwB;EAErB,AADK,KAAc,EAAgB,CAAI,GACvC,IAAe,CAAI;CACvB,GACA,CAAC,GAAc,CAAY,CAC/B;CAWA,AATA,EAAe,KAAU,SAAkB,EAAQ,EAAK,CAAC,GASzD,QAAgB;EACZ,IAAI,CAAC,GAAQ;EACb,IAAM,KAAU,MAA4B;GACxC,IAAI,CAAC,GAAqB;GAC1B,IAAM,IAAS,EAAM;GACjB,GAAU,SAAS,CAAM,KAAK,GAAW,SAAS,CAAM,KAC5D,EAAQ,EAAK;EACjB;EAEA,OADA,OAAO,iBAAiB,aAAa,CAAM,SAC9B;GACT,OAAO,oBAAoB,aAAa,CAAM;EAClD;CACJ,GAAG;EAAC;EAAQ;EAAqB;EAAS;EAAU;CAAS,CAAC;CAE9D,IAAM,KAAsB,MAAkC;EAE1D,AADA,EAAQ,MAAM,UAAU,CAAK,GAC7B,EAAQ,CAAC,CAAM;CACnB,GAEM,IAAe;EACjB,GAAG;EACH,OAAO;GACH,GAAG,EAAQ;GACX,SAAS;GACT,iBAAiB;GACjB,iBAAiB;EACrB;CACJ,GAEM,IACF,kBAAC,OAAD;EACI,KAAK;EACD;EACJ,MAAK;EACL,WAAW,EAAG,EAAO,SAAS,IAAS,EAAO,YAAY,EAAO,IAAY,CAAS;EACtF,OAAO;EAEN;CACA,CAAA;CAGT,OACI,kBAAC,QAAD;EAAM,KAAK;EAAa,WAAW,EAAO;EAA1C,UAAA,CACK,GACA,MAAW,IAAS,kBAAC,GAAD,EAAA,UAAS,EAAc,CAAA,IAAI,EAC9C;;AAEd"}
+{"version":3,"file":"Popover.js","names":["styles","Popover_module_default","POPOVER_OFFSET","Popover","isControlled","open","internalOpen","setInternalOpen","useState","defaultOpen","isOpen","id","useId","rootNode","setRootNode","panelNode","setPanelNode","floatingStyle","useAnchorPosition","placement","portal","setOpen","useCallback","next","onOpenChange","useEscapeLayer","closeOnEsc","useEffect","onDown","closeOnOutsideClick","target","event","handleTriggerClick","trigger","triggerClone","panel","cn","className","Portal"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — trigger and children are the two halves, placement\n * is where it lands, portal is whether it escapes the tree, and open/onOpenChange/defaultOpen is the standard controlled-\n * or-not pair. closeOnEsc and closeOnOutsideClick are separate because a popover\n * holding a form wants one and not the other.\n */\nimport { useCallback, useEffect, useId, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { usePortalTabOrder } from \"@/components/Portal/tab-bridge\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Popover.module.css\";\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopoverProps {\n    /** Trigger element. Receives `onClick`/`aria-expanded`/`aria-controls`. */\n    trigger: ReactElement<{\n        onClick?: (e: React.MouseEvent) => void;\n        \"aria-expanded\"?: boolean;\n        \"aria-controls\"?: string;\n    }>;\n    children: ReactNode;\n    placement?: PopoverPlacement;\n    /**\n     * Render the panel in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, any ancestor with `overflow` other than `visible` clips the panel —\n     * inside a `DataTable` cell only 3% of it was visible (measured in Chrome at\n     * 1440 px). In a portal it escapes the clip, flips to the opposite side when\n     * the requested one has no room, and follows the trigger on scroll and resize.\n     * `false` keeps the in-flow panel.\n     */\n    portal?: boolean;\n    /** Controlled open state. */\n    open?: boolean;\n    /** Called when the user toggles or dismisses. */\n    onOpenChange?: (open: boolean) => void;\n    /** Default open state for uncontrolled usage. */\n    defaultOpen?: boolean;\n    /** Close on Escape. Default true. */\n    closeOnEsc?: boolean;\n    /** Close on outside click. Default true. */\n    closeOnOutsideClick?: boolean;\n    className?: string;\n}\n\n/** Gap between trigger and panel, in px — the in-flow CSS uses the same 8 px. */\nconst POPOVER_OFFSET = 8;\n\n/**\n * Lightweight popover. Renders a panel anchored to a trigger, dismissed on\n * outside click / Escape.\n *\n * Portalled by default, with viewport-aware placement: the panel flips to the\n * opposite side when the requested one overflows, and is clamped inside the\n * viewport otherwise.\n */\nexport function Popover({\n    trigger,\n    children,\n    placement = \"bottom\",\n    portal = true,\n    open,\n    onOpenChange,\n    defaultOpen = false,\n    closeOnEsc = true,\n    closeOnOutsideClick = true,\n    className,\n}: PopoverProps) {\n    const isControlled = open !== undefined;\n    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);\n    const isOpen = isControlled ? open : internalOpen;\n    const id = useId();\n    const [rootNode, setRootNode] = useState<HTMLSpanElement | null>(null);\n    const [panelNode, setPanelNode] = useState<HTMLDivElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: rootNode,\n        floating: panelNode,\n        side: placement,\n        align: \"center\",\n        offset: POPOVER_OFFSET,\n        enabled: portal && isOpen,\n    });\n    usePortalTabOrder({ enabled: portal && isOpen, anchor: rootNode, panel: panelNode });\n\n    const setOpen = useCallback(\n        (next: boolean): void => {\n            if (!isControlled) setInternalOpen(next);\n            onOpenChange?.(next);\n        },\n        [isControlled, onOpenChange],\n    );\n\n    useEscapeLayer(isOpen && closeOnEsc, () => setOpen(false));\n\n    /**\n     * Dismiss on a press outside both trigger and panel.\n     *\n     * The panel is checked on its own because in a portal it is not inside the\n     * trigger's wrapper, and a press inside it — on a form field, say — would\n     * otherwise count as outside.\n     */\n    useEffect(() => {\n        if (!isOpen) return;\n        const onDown = (event: MouseEvent): void => {\n            if (!closeOnOutsideClick) return;\n            const target = event.target as Node;\n            if (rootNode?.contains(target) || panelNode?.contains(target)) return;\n            setOpen(false);\n        };\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [isOpen, closeOnOutsideClick, setOpen, rootNode, panelNode]);\n\n    const handleTriggerClick = (event: React.MouseEvent): void => {\n        trigger.props.onClick?.(event);\n        setOpen(!isOpen);\n    };\n\n    const triggerClone = {\n        ...trigger,\n        props: {\n            ...trigger.props,\n            onClick: handleTriggerClick,\n            \"aria-expanded\": isOpen,\n            \"aria-controls\": id,\n        },\n    } as ReactElement;\n\n    const panel = (\n        <div\n            ref={setPanelNode}\n            id={id}\n            role=\"dialog\"\n            className={cn(styles.popover, portal ? styles.portalled : styles[placement], className)}\n            style={floatingStyle}\n        >\n            {children}\n        </div>\n    );\n\n    return (\n        <span ref={setRootNode} className={styles.root}>\n            {triggerClone}\n            {isOpen && (portal ? <Portal>{panel}</Portal> : panel)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;;AAkDA,IAAME,IAAiB;AAUvB,SAAgBC,EAAQ,EACpB,YACA,aACA,eAAY,UACZ,YAAS,IACT,SACA,iBACA,iBAAc,IACd,gBAAa,IACb,yBAAsB,IACtB,gBACa;CACb,IAAMC,IAAeC,MAAS,KAAA,GACxB,CAACC,GAAcC,KAAmBC,EAAkBC,CAAW,GAC/DC,IAASN,IAAeC,IAAOC,GAC/BK,IAAKC,EAAM,GACX,CAACC,GAAUC,KAAeN,EAAiC,IAAI,GAC/D,CAACO,GAAWC,KAAgBR,EAAgC,IAAI,GAChES,IAAgBC,EAAkB;EACpC,QAAQL;EACR,UAAUE;EACV,MAAMI;EACN,OAAO;EACP,QAAQjB;EACR,SAASkB,KAAUV;CACvB,CAAC;CACD,EAAkB;EAAE,SAASU,KAAUV;EAAQ,QAAQG;EAAU,OAAOE;CAAU,CAAC;CAEnF,IAAMM,IAAUC,GACX,MAAwB;EAErB,AADKlB,KAAcG,EAAgBgB,CAAI,GACvCC,IAAeD,CAAI;CACvB,GACA,CAACnB,GAAcoB,CAAY,CAC/B;CAWA,AATAC,EAAef,KAAUgB,SAAkBL,EAAQ,EAAK,CAAC,GASzDM,QAAgB;EACZ,IAAI,CAACjB,GAAQ;EACb,IAAMkB,KAAU,MAA4B;GACxC,IAAI,CAACC,GAAqB;GAC1B,IAAMC,IAASC,EAAM;GACrB,AAAIlB,GAAU,SAASiB,CAAM,KAAKf,GAAW,SAASe,CAAM,KAC5DT,EAAQ,EAAK;EACjB;EAEA,OADA,OAAO,iBAAiB,aAAaO,CAAM,SAC9B;GACT,OAAO,oBAAoB,aAAaA,CAAM;EAClD;CACJ,GAAG;EAAClB;EAAQmB;EAAqBR;EAASR;EAAUE;CAAS,CAAC;CAE9D,IAAMiB,KAAsB,MAAkC;EAE1D,AADAC,EAAQ,MAAM,UAAUF,CAAK,GAC7BV,EAAQ,CAACX,CAAM;CACnB,GAEMwB,IAAe;EACjB,GAAGD;EACH,OAAO;GACH,GAAGA,EAAQ;GACX,SAASD;GACT,iBAAiBtB;GACjB,iBAAiBC;EACrB;CACJ,GAEMwB,IACF,kBAAC,OAAD;EACI,KAAKnB;EACD;EACJ,MAAK;EACL,WAAWoB,EAAGpC,EAAO,SAASoB,IAASpB,EAAO,YAAYA,EAAOmB,IAAYkB,CAAS;EACtF,OAAOpB;EAEN;CACA,CAAA;CAGT,OACI,kBAAC,QAAD;EAAM,KAAKH;EAAa,WAAWd,EAAO;EAA1C,UAAA,CACKkC,GACAxB,MAAWU,IAAS,kBAACkB,GAAD,EAAA,UAASH,EAAc,CAAA,IAAIA,EAC9C;;AAEd"}

package/dist/components/Popover/Popover.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.cjs","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.popover {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-popover-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.popover:focus {\n    outline: none;\n}\n\n.portalled {\n    --tempest-popover-tx: 0;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-popover-in {\n    from {\n        opacity: 0;\n        transform: translate(var(--tempest-popover-tx, -50%), 4px);\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .popover {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Popover.module.cjs","names":["root","popover","tempestPopoverIn","portalled","top","bottom","left","right","Popover_module_default"],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.popover {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-popover-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.popover:focus {\n    outline: none;\n}\n\n.portalled {\n    --tempest-popover-tx: 0;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-popover-in {\n    from {\n        opacity: 0;\n        transform: translate(var(--tempest-popover-tx, -50%), 4px);\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .popover {\n        animation: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Popover/Popover.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.js","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.popover {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-popover-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.popover:focus {\n    outline: none;\n}\n\n.portalled {\n    --tempest-popover-tx: 0;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-popover-in {\n    from {\n        opacity: 0;\n        transform: translate(var(--tempest-popover-tx, -50%), 4px);\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .popover {\n        animation: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Popover.module.js","names":["root","popover","tempestPopoverIn","portalled","top","bottom","left","right","Popover_module_default"],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":[".root {\n    position: relative;\n    display: inline-flex;\n}\n\n.popover {\n    position: absolute;\n    z-index: var(--tempest-z-popover);\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    min-width: 200px;\n    max-width: 320px;\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-snug);\n    animation: tempest-popover-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.popover:focus {\n    outline: none;\n}\n\n.portalled {\n    --tempest-popover-tx: 0;\n}\n\n/* Placements (center-aligned across the trigger). */\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n@keyframes tempest-popover-in {\n    from {\n        opacity: 0;\n        transform: translate(var(--tempest-popover-tx, -50%), 4px);\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .popover {\n        animation: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Portal/Portal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.cjs","names":[],"sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePortalHost } from \"./portal-host\";\n\nexport interface PortalProps {\n    /** Content rendered through the portal. */\n    children: ReactNode;\n    /**\n     * Target DOM node to render into.\n     *\n     * Defaults to the fullscreen element while one is presented, and to\n     * `document.body` otherwise.\n     */\n    container?: Element | null;\n}\n\n/**\n * Renders its children into a different part of the DOM tree via a React portal.\n *\n * Useful for overlays (modals, tooltips, dropdowns) that must escape parent\n * overflow/stacking contexts.\n *\n * Without `container` the target is the element currently presented fullscreen,\n * and `document.body` the rest of the time. `body` alone would be wrong during\n * fullscreen: the browser paints only the fullscreen element's subtree, so an\n * overlay mounted outside it is invisible and unclickable while looking perfectly\n * healthy in the DOM. Passing `container` opts out of that and pins the target.\n *\n * SSR-safe: renders `null` on the server and on the first client render, then\n * mounts the portal after hydration (when `document` is available).\n *\n * @param props - The portal props.\n * @returns The portal node once mounted, otherwise `null`.\n */\nexport function Portal({ children, container }: PortalProps): ReactNode {\n    const [mounted, setMounted] = useState(false);\n    const host = usePortalHost();\n\n    useEffect(() => {\n        setMounted(true);\n        return () => setMounted(false);\n    }, []);\n\n    const target = container ?? host;\n    if (!mounted || !target) return null;\n\n    return createPortal(children, target);\n}\n"],"mappings":"mFAkCA,SAAgB,EAAO,CAAE,WAAU,aAAqC,CACpE,GAAM,CAAC,EAAS,IAAA,EAAc,EAAA,SAAA,CAAS,EAAK,EACtC,EAAO,EAAA,cAAc,GAE3B,EAAA,EAAA,UAAA,MACI,EAAW,EAAI,MACF,EAAW,EAAK,GAC9B,CAAC,CAAC,EAEL,IAAM,EAAS,GAAa,EAG5B,MAFI,CAAC,GAAW,CAAC,EAAe,MAEhC,EAAO,EAAA,aAAA,CAAa,EAAU,CAAM,CACxC"}
+{"version":3,"file":"Portal.cjs","names":["useState","usePortalHost","createPortal","require_portal_host","react","react_dom","Portal","mounted","setMounted","host","target","container","children"],"sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePortalHost } from \"./portal-host\";\n\nexport interface PortalProps {\n    /** Content rendered through the portal. */\n    children: ReactNode;\n    /**\n     * Target DOM node to render into.\n     *\n     * Defaults to the fullscreen element while one is presented, and to\n     * `document.body` otherwise.\n     */\n    container?: Element | null;\n}\n\n/**\n * Renders its children into a different part of the DOM tree via a React portal.\n *\n * Useful for overlays (modals, tooltips, dropdowns) that must escape parent\n * overflow/stacking contexts.\n *\n * Without `container` the target is the element currently presented fullscreen,\n * and `document.body` the rest of the time. `body` alone would be wrong during\n * fullscreen: the browser paints only the fullscreen element's subtree, so an\n * overlay mounted outside it is invisible and unclickable while looking perfectly\n * healthy in the DOM. Passing `container` opts out of that and pins the target.\n *\n * SSR-safe: renders `null` on the server and on the first client render, then\n * mounts the portal after hydration (when `document` is available).\n *\n * @param props - The portal props.\n * @returns The portal node once mounted, otherwise `null`.\n */\nexport function Portal({ children, container }: PortalProps): ReactNode {\n    const [mounted, setMounted] = useState(false);\n    const host = usePortalHost();\n\n    useEffect(() => {\n        setMounted(true);\n        return () => setMounted(false);\n    }, []);\n\n    const target = container ?? host;\n    if (!mounted || !target) return null;\n\n    return createPortal(children, target);\n}\n"],"mappings":"A,mFAkCA,SAAgBM,EAAO,CAAE,WAAU,aAAqC,CACpE,GAAM,CAACC,EAASC,IAAA,EAAcR,EAAAA,SAAAA,CAAS,EAAK,EACtCS,EAAOR,EAAAA,cAAc,GAE3B,EAAAG,EAAA,UAAA,MACII,EAAW,EAAI,MACFA,EAAW,EAAK,GAC9B,CAAC,CAAC,EAEL,IAAME,EAASC,GAAaF,EAG5B,MAFI,CAACF,GAAW,CAACG,EAAe,MAEhC,EAAOR,EAAAA,aAAAA,CAAaU,EAAUF,CAAM,CACxC,C"}

package/dist/components/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","names":[],"sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePortalHost } from \"./portal-host\";\n\nexport interface PortalProps {\n    /** Content rendered through the portal. */\n    children: ReactNode;\n    /**\n     * Target DOM node to render into.\n     *\n     * Defaults to the fullscreen element while one is presented, and to\n     * `document.body` otherwise.\n     */\n    container?: Element | null;\n}\n\n/**\n * Renders its children into a different part of the DOM tree via a React portal.\n *\n * Useful for overlays (modals, tooltips, dropdowns) that must escape parent\n * overflow/stacking contexts.\n *\n * Without `container` the target is the element currently presented fullscreen,\n * and `document.body` the rest of the time. `body` alone would be wrong during\n * fullscreen: the browser paints only the fullscreen element's subtree, so an\n * overlay mounted outside it is invisible and unclickable while looking perfectly\n * healthy in the DOM. Passing `container` opts out of that and pins the target.\n *\n * SSR-safe: renders `null` on the server and on the first client render, then\n * mounts the portal after hydration (when `document` is available).\n *\n * @param props - The portal props.\n * @returns The portal node once mounted, otherwise `null`.\n */\nexport function Portal({ children, container }: PortalProps): ReactNode {\n    const [mounted, setMounted] = useState(false);\n    const host = usePortalHost();\n\n    useEffect(() => {\n        setMounted(true);\n        return () => setMounted(false);\n    }, []);\n\n    const target = container ?? host;\n    if (!mounted || !target) return null;\n\n    return createPortal(children, target);\n}\n"],"mappings":";;;;AAkCA,SAAgB,EAAO,EAAE,aAAU,gBAAqC;CACpE,IAAM,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAO,EAAc;CAE3B,SACI,EAAW,EAAI,SACF,EAAW,EAAK,IAC9B,CAAC,CAAC;CAEL,IAAM,IAAS,KAAa;CAG5B,OAFI,CAAC,KAAW,CAAC,IAAe,OAEzB,EAAa,GAAU,CAAM;AACxC"}
+{"version":3,"file":"Portal.js","names":["Portal","mounted","setMounted","useState","host","usePortalHost","target","container","createPortal","children"],"sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { usePortalHost } from \"./portal-host\";\n\nexport interface PortalProps {\n    /** Content rendered through the portal. */\n    children: ReactNode;\n    /**\n     * Target DOM node to render into.\n     *\n     * Defaults to the fullscreen element while one is presented, and to\n     * `document.body` otherwise.\n     */\n    container?: Element | null;\n}\n\n/**\n * Renders its children into a different part of the DOM tree via a React portal.\n *\n * Useful for overlays (modals, tooltips, dropdowns) that must escape parent\n * overflow/stacking contexts.\n *\n * Without `container` the target is the element currently presented fullscreen,\n * and `document.body` the rest of the time. `body` alone would be wrong during\n * fullscreen: the browser paints only the fullscreen element's subtree, so an\n * overlay mounted outside it is invisible and unclickable while looking perfectly\n * healthy in the DOM. Passing `container` opts out of that and pins the target.\n *\n * SSR-safe: renders `null` on the server and on the first client render, then\n * mounts the portal after hydration (when `document` is available).\n *\n * @param props - The portal props.\n * @returns The portal node once mounted, otherwise `null`.\n */\nexport function Portal({ children, container }: PortalProps): ReactNode {\n    const [mounted, setMounted] = useState(false);\n    const host = usePortalHost();\n\n    useEffect(() => {\n        setMounted(true);\n        return () => setMounted(false);\n    }, []);\n\n    const target = container ?? host;\n    if (!mounted || !target) return null;\n\n    return createPortal(children, target);\n}\n"],"mappings":";;;;AAkCA,SAAgBA,EAAO,EAAE,aAAU,gBAAqC;CACpE,IAAM,CAACC,GAASC,KAAcC,EAAS,EAAK,GACtCC,IAAOC,EAAc;CAE3B,SACIH,EAAW,EAAI,SACFA,EAAW,EAAK,IAC9B,CAAC,CAAC;CAEL,IAAMI,IAASC,KAAaH;CAG5B,OAFI,CAACH,KAAW,CAACK,IAAe,OAEzBE,EAAaC,GAAUH,CAAM;AACxC"}

package/dist/components/Portal/anchor-position.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-position.cjs","names":[],"sources":["../../../src/components/Portal/anchor-position.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { CSSProperties } from \"react\";\n\n/** Side of the anchor a floating layer is placed on. */\nexport type AnchorSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\n/** Alignment of the floating layer along the anchor's edge. */\nexport type AnchorAlign = \"start\" | \"center\" | \"end\";\n\n/** The viewport-relative box a placement is computed from. */\nexport interface AnchorRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Everything {@link computeAnchorPosition} needs, all in CSS pixels. */\nexport interface AnchorGeometry {\n    anchor: AnchorRect;\n    width: number;\n    height: number;\n    viewportWidth: number;\n    viewportHeight: number;\n    side: AnchorSide;\n    align: AnchorAlign;\n    offset: number;\n    margin: number;\n}\n\n/** A resolved placement: viewport coordinates plus the side actually used. */\nexport interface AnchorPlacement {\n    top: number;\n    left: number;\n    side: AnchorSide;\n}\n\n/** What {@link useAnchorPosition} keeps between measurements. */\ninterface MeasuredPlacement extends AnchorPlacement {\n    /** The anchor's width, when the layer matches it. */\n    width: number | undefined;\n}\n\nconst OPPOSITE: Record<AnchorSide, AnchorSide> = {\n    top: \"bottom\",\n    bottom: \"top\",\n    left: \"right\",\n    right: \"left\",\n};\n\n/** Distance kept between a floating layer and the viewport edge, in px. */\nexport const ANCHOR_VIEWPORT_MARGIN = 8;\n\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\nfunction mainAxis(geometry: AnchorGeometry, side: AnchorSide): number {\n    const { anchor, width, height, offset } = geometry;\n    switch (side) {\n        case \"top\":\n            return anchor.top - offset - height;\n        case \"bottom\":\n            return anchor.top + anchor.height + offset;\n        case \"left\":\n            return anchor.left - offset - width;\n        case \"right\":\n        default:\n            return anchor.left + anchor.width + offset;\n    }\n}\n\nfunction fits(geometry: AnchorGeometry, side: AnchorSide): boolean {\n    const { width, height, viewportWidth, viewportHeight, margin } = geometry;\n    const start = mainAxis(geometry, side);\n    const size = side === \"top\" || side === \"bottom\" ? height : width;\n    const limit = side === \"top\" || side === \"bottom\" ? viewportHeight : viewportWidth;\n    return start >= margin && start + size <= limit - margin;\n}\n\nfunction crossAxis(start: number, length: number, size: number, align: AnchorAlign): number {\n    if (align === \"start\") return start;\n    if (align === \"end\") return start + length - size;\n    return start + (length - size) / 2;\n}\n\n/**\n * Place a floating layer next to its anchor, inside the viewport.\n *\n * The requested side wins when the layer fits there. When it does not and the\n * opposite side does, the layer flips — the case that matters is the action menu\n * of the last row of a table near the bottom of the screen, which would otherwise\n * open below the fold. When neither side fits, the requested one is kept and the\n * layer is clamped, because a partially visible menu the user can scroll to beats\n * one that jumps sides depending on a pixel.\n *\n * Both axes are then clamped to the viewport minus `margin`.\n *\n * @param geometry - The anchor box, the floating layer's size, the viewport, and\n * the requested placement.\n * @returns The viewport coordinates for a `position: fixed` layer, and the side\n * that was used after flipping.\n */\nexport function computeAnchorPosition(geometry: AnchorGeometry): AnchorPlacement {\n    const { anchor, width, height, viewportWidth, viewportHeight, align, margin } = geometry;\n    const requested = geometry.side;\n    const flipped = OPPOSITE[requested];\n    const side = !fits(geometry, requested) && fits(geometry, flipped) ? flipped : requested;\n    const vertical = side === \"top\" || side === \"bottom\";\n    const main = mainAxis(geometry, side);\n    const top = vertical ? main : crossAxis(anchor.top, anchor.height, height, align);\n    const left = vertical ? crossAxis(anchor.left, anchor.width, width, align) : main;\n    return {\n        top: clamp(top, margin, viewportHeight - height - margin),\n        left: clamp(left, margin, viewportWidth - width - margin),\n        side,\n    };\n}\n\n/** Options of {@link useAnchorPosition}. */\nexport interface AnchorPositionOptions {\n    /** Element the layer is anchored to. */\n    anchor: HTMLElement | null;\n    /** The floating layer itself, once mounted. */\n    floating: HTMLElement | null;\n    side: AnchorSide;\n    align: AnchorAlign;\n    /** Gap between anchor and layer, in px. */\n    offset: number;\n    /** When false the hook does nothing and returns `undefined`. */\n    enabled: boolean;\n    /**\n     * Give the layer the anchor's width — a listbox under its input. Default\n     * `false`.\n     */\n    matchWidth?: boolean;\n}\n\n/**\n * Keep a portalled layer glued to its anchor.\n *\n * Takes the floating element as a value rather than a ref, because `Portal`\n * renders `null` on its first pass and mounts in an effect: a layout effect keyed\n * off `open` would run while the layer does not exist and measure nothing. With\n * the node held in state (a callback ref), the effect runs on the render that has\n * it, and `useLayoutEffect` settles the position before the first paint.\n *\n * The size comes from `offsetWidth`/`offsetHeight`, not from\n * `getBoundingClientRect`, which reports the transformed box — the layers enter\n * with a `translate`/`scale` animation, and the transformed rect would place them\n * a few pixels off. The anchor's rect is the right one to read: it is where the\n * trigger is painted.\n *\n * Scroll (captured, so a scrolling table wrapper counts) and resize reposition the\n * layer on the next animation frame, so a menu open inside a table that scrolls\n * follows its row instead of floating where the row used to be. So does a change\n * in the size of either box, through a `ResizeObserver`: a combobox list flipped\n * above its input shrinks as the user types, and a multi-select field grows a\n * line as chips are added — without the observer the list would keep its old\n * top and float away from the field, or cover it.\n *\n * With `matchWidth` the anchor's width is written to the layer **before** its\n * height is read, so the height is measured at the width it will be painted at —\n * a list whose options wrap at the narrower width is taller.\n *\n * The unmeasured first pass is **not** hidden with `visibility: hidden`: an\n * element under it cannot take focus, and the menu's focus effect runs before\n * the measured re-render, so the first entry silently kept no focus (measured in\n * Chrome; jsdom does not enforce it). Nothing is painted at the unmeasured\n * position anyway — the layout effect re-renders before the browser paints.\n *\n * @param options - Anchor, floating node, placement, and whether it is active.\n * @returns A `position: fixed` style for the layer, or `undefined` when disabled.\n */\nexport function useAnchorPosition({\n    anchor,\n    floating,\n    side,\n    align,\n    offset,\n    enabled,\n    matchWidth = false,\n}: AnchorPositionOptions): CSSProperties | undefined {\n    const [placement, setPlacement] = useState<MeasuredPlacement | null>(null);\n\n    useLayoutEffect(() => {\n        if (!enabled || !anchor || !floating) {\n            setPlacement(null);\n            return;\n        }\n        const update = (): void => {\n            const rect = anchor.getBoundingClientRect();\n            const width = matchWidth ? rect.width : undefined;\n            if (width !== undefined) floating.style.setProperty(\"width\", `${width}px`);\n            const position = computeAnchorPosition({\n                anchor: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n                width: floating.offsetWidth,\n                height: floating.offsetHeight,\n                viewportWidth: window.innerWidth,\n                viewportHeight: window.innerHeight,\n                side,\n                align,\n                offset,\n                margin: ANCHOR_VIEWPORT_MARGIN,\n            });\n            const next: MeasuredPlacement = { ...position, width };\n            setPlacement((current) =>\n                current &&\n                current.top === next.top &&\n                current.left === next.left &&\n                current.side === next.side &&\n                current.width === next.width\n                    ? current\n                    : next,\n            );\n        };\n        update();\n        let frame = 0;\n        const schedule = (): void => {\n            if (frame !== 0) return;\n            frame = requestAnimationFrame(() => {\n                frame = 0;\n                update();\n            });\n        };\n        window.addEventListener(\"scroll\", schedule, { capture: true, passive: true });\n        window.addEventListener(\"resize\", schedule);\n        const observer =\n            typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(schedule);\n        observer?.observe(floating);\n        observer?.observe(anchor);\n        return () => {\n            observer?.disconnect();\n            if (frame !== 0) cancelAnimationFrame(frame);\n            window.removeEventListener(\"scroll\", schedule, { capture: true });\n            window.removeEventListener(\"resize\", schedule);\n        };\n    }, [enabled, anchor, floating, side, align, offset, matchWidth]);\n\n    if (!enabled) return undefined;\n    return {\n        position: \"fixed\",\n        top: placement?.top ?? 0,\n        left: placement?.left ?? 0,\n        width: placement?.width,\n    };\n}\n"],"mappings":"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"}
+{"version":3,"file":"anchor-position.cjs","names":["useState","react","OPPOSITE","clamp","min","value","max","mainAxis","geometry","side","anchor","offset","height","width","fits","start","size","limit","viewportHeight","viewportWidth","margin","crossAxis","align","length","computeAnchorPosition","requested","flipped","vertical","main","top","left","useAnchorPosition","placement","setPlacement","enabled","floating","update","rect","matchWidth","next","current","frame","schedule","observer"],"sources":["../../../src/components/Portal/anchor-position.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { CSSProperties } from \"react\";\n\n/** Side of the anchor a floating layer is placed on. */\nexport type AnchorSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\n/** Alignment of the floating layer along the anchor's edge. */\nexport type AnchorAlign = \"start\" | \"center\" | \"end\";\n\n/** The viewport-relative box a placement is computed from. */\nexport interface AnchorRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Everything {@link computeAnchorPosition} needs, all in CSS pixels. */\nexport interface AnchorGeometry {\n    anchor: AnchorRect;\n    width: number;\n    height: number;\n    viewportWidth: number;\n    viewportHeight: number;\n    side: AnchorSide;\n    align: AnchorAlign;\n    offset: number;\n    margin: number;\n}\n\n/** A resolved placement: viewport coordinates plus the side actually used. */\nexport interface AnchorPlacement {\n    top: number;\n    left: number;\n    side: AnchorSide;\n}\n\n/** What {@link useAnchorPosition} keeps between measurements. */\ninterface MeasuredPlacement extends AnchorPlacement {\n    /** The anchor's width, when the layer matches it. */\n    width: number | undefined;\n}\n\nconst OPPOSITE: Record<AnchorSide, AnchorSide> = {\n    top: \"bottom\",\n    bottom: \"top\",\n    left: \"right\",\n    right: \"left\",\n};\n\n/** Distance kept between a floating layer and the viewport edge, in px. */\nexport const ANCHOR_VIEWPORT_MARGIN = 8;\n\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\nfunction mainAxis(geometry: AnchorGeometry, side: AnchorSide): number {\n    const { anchor, width, height, offset } = geometry;\n    switch (side) {\n        case \"top\":\n            return anchor.top - offset - height;\n        case \"bottom\":\n            return anchor.top + anchor.height + offset;\n        case \"left\":\n            return anchor.left - offset - width;\n        case \"right\":\n        default:\n            return anchor.left + anchor.width + offset;\n    }\n}\n\nfunction fits(geometry: AnchorGeometry, side: AnchorSide): boolean {\n    const { width, height, viewportWidth, viewportHeight, margin } = geometry;\n    const start = mainAxis(geometry, side);\n    const size = side === \"top\" || side === \"bottom\" ? height : width;\n    const limit = side === \"top\" || side === \"bottom\" ? viewportHeight : viewportWidth;\n    return start >= margin && start + size <= limit - margin;\n}\n\nfunction crossAxis(start: number, length: number, size: number, align: AnchorAlign): number {\n    if (align === \"start\") return start;\n    if (align === \"end\") return start + length - size;\n    return start + (length - size) / 2;\n}\n\n/**\n * Place a floating layer next to its anchor, inside the viewport.\n *\n * The requested side wins when the layer fits there. When it does not and the\n * opposite side does, the layer flips — the case that matters is the action menu\n * of the last row of a table near the bottom of the screen, which would otherwise\n * open below the fold. When neither side fits, the requested one is kept and the\n * layer is clamped, because a partially visible menu the user can scroll to beats\n * one that jumps sides depending on a pixel.\n *\n * Both axes are then clamped to the viewport minus `margin`.\n *\n * @param geometry - The anchor box, the floating layer's size, the viewport, and\n * the requested placement.\n * @returns The viewport coordinates for a `position: fixed` layer, and the side\n * that was used after flipping.\n */\nexport function computeAnchorPosition(geometry: AnchorGeometry): AnchorPlacement {\n    const { anchor, width, height, viewportWidth, viewportHeight, align, margin } = geometry;\n    const requested = geometry.side;\n    const flipped = OPPOSITE[requested];\n    const side = !fits(geometry, requested) && fits(geometry, flipped) ? flipped : requested;\n    const vertical = side === \"top\" || side === \"bottom\";\n    const main = mainAxis(geometry, side);\n    const top = vertical ? main : crossAxis(anchor.top, anchor.height, height, align);\n    const left = vertical ? crossAxis(anchor.left, anchor.width, width, align) : main;\n    return {\n        top: clamp(top, margin, viewportHeight - height - margin),\n        left: clamp(left, margin, viewportWidth - width - margin),\n        side,\n    };\n}\n\n/** Options of {@link useAnchorPosition}. */\nexport interface AnchorPositionOptions {\n    /** Element the layer is anchored to. */\n    anchor: HTMLElement | null;\n    /** The floating layer itself, once mounted. */\n    floating: HTMLElement | null;\n    side: AnchorSide;\n    align: AnchorAlign;\n    /** Gap between anchor and layer, in px. */\n    offset: number;\n    /** When false the hook does nothing and returns `undefined`. */\n    enabled: boolean;\n    /**\n     * Give the layer the anchor's width — a listbox under its input. Default\n     * `false`.\n     */\n    matchWidth?: boolean;\n}\n\n/**\n * Keep a portalled layer glued to its anchor.\n *\n * Takes the floating element as a value rather than a ref, because `Portal`\n * renders `null` on its first pass and mounts in an effect: a layout effect keyed\n * off `open` would run while the layer does not exist and measure nothing. With\n * the node held in state (a callback ref), the effect runs on the render that has\n * it, and `useLayoutEffect` settles the position before the first paint.\n *\n * The size comes from `offsetWidth`/`offsetHeight`, not from\n * `getBoundingClientRect`, which reports the transformed box — the layers enter\n * with a `translate`/`scale` animation, and the transformed rect would place them\n * a few pixels off. The anchor's rect is the right one to read: it is where the\n * trigger is painted.\n *\n * Scroll (captured, so a scrolling table wrapper counts) and resize reposition the\n * layer on the next animation frame, so a menu open inside a table that scrolls\n * follows its row instead of floating where the row used to be. So does a change\n * in the size of either box, through a `ResizeObserver`: a combobox list flipped\n * above its input shrinks as the user types, and a multi-select field grows a\n * line as chips are added — without the observer the list would keep its old\n * top and float away from the field, or cover it.\n *\n * With `matchWidth` the anchor's width is written to the layer **before** its\n * height is read, so the height is measured at the width it will be painted at —\n * a list whose options wrap at the narrower width is taller.\n *\n * The unmeasured first pass is **not** hidden with `visibility: hidden`: an\n * element under it cannot take focus, and the menu's focus effect runs before\n * the measured re-render, so the first entry silently kept no focus (measured in\n * Chrome; jsdom does not enforce it). Nothing is painted at the unmeasured\n * position anyway — the layout effect re-renders before the browser paints.\n *\n * @param options - Anchor, floating node, placement, and whether it is active.\n * @returns A `position: fixed` style for the layer, or `undefined` when disabled.\n */\nexport function useAnchorPosition({\n    anchor,\n    floating,\n    side,\n    align,\n    offset,\n    enabled,\n    matchWidth = false,\n}: AnchorPositionOptions): CSSProperties | undefined {\n    const [placement, setPlacement] = useState<MeasuredPlacement | null>(null);\n\n    useLayoutEffect(() => {\n        if (!enabled || !anchor || !floating) {\n            setPlacement(null);\n            return;\n        }\n        const update = (): void => {\n            const rect = anchor.getBoundingClientRect();\n            const width = matchWidth ? rect.width : undefined;\n            if (width !== undefined) floating.style.setProperty(\"width\", `${width}px`);\n            const position = computeAnchorPosition({\n                anchor: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n                width: floating.offsetWidth,\n                height: floating.offsetHeight,\n                viewportWidth: window.innerWidth,\n                viewportHeight: window.innerHeight,\n                side,\n                align,\n                offset,\n                margin: ANCHOR_VIEWPORT_MARGIN,\n            });\n            const next: MeasuredPlacement = { ...position, width };\n            setPlacement((current) =>\n                current &&\n                current.top === next.top &&\n                current.left === next.left &&\n                current.side === next.side &&\n                current.width === next.width\n                    ? current\n                    : next,\n            );\n        };\n        update();\n        let frame = 0;\n        const schedule = (): void => {\n            if (frame !== 0) return;\n            frame = requestAnimationFrame(() => {\n                frame = 0;\n                update();\n            });\n        };\n        window.addEventListener(\"scroll\", schedule, { capture: true, passive: true });\n        window.addEventListener(\"resize\", schedule);\n        const observer =\n            typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(schedule);\n        observer?.observe(floating);\n        observer?.observe(anchor);\n        return () => {\n            observer?.disconnect();\n            if (frame !== 0) cancelAnimationFrame(frame);\n            window.removeEventListener(\"scroll\", schedule, { capture: true });\n            window.removeEventListener(\"resize\", schedule);\n        };\n    }, [enabled, anchor, floating, side, align, offset, matchWidth]);\n\n    if (!enabled) return undefined;\n    return {\n        position: \"fixed\",\n        top: placement?.top ?? 0,\n        left: placement?.left ?? 0,\n        width: placement?.width,\n    };\n}\n"],"mappings":"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"}

package/dist/components/Portal/anchor-position.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-position.js","names":[],"sources":["../../../src/components/Portal/anchor-position.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { CSSProperties } from \"react\";\n\n/** Side of the anchor a floating layer is placed on. */\nexport type AnchorSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\n/** Alignment of the floating layer along the anchor's edge. */\nexport type AnchorAlign = \"start\" | \"center\" | \"end\";\n\n/** The viewport-relative box a placement is computed from. */\nexport interface AnchorRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Everything {@link computeAnchorPosition} needs, all in CSS pixels. */\nexport interface AnchorGeometry {\n    anchor: AnchorRect;\n    width: number;\n    height: number;\n    viewportWidth: number;\n    viewportHeight: number;\n    side: AnchorSide;\n    align: AnchorAlign;\n    offset: number;\n    margin: number;\n}\n\n/** A resolved placement: viewport coordinates plus the side actually used. */\nexport interface AnchorPlacement {\n    top: number;\n    left: number;\n    side: AnchorSide;\n}\n\n/** What {@link useAnchorPosition} keeps between measurements. */\ninterface MeasuredPlacement extends AnchorPlacement {\n    /** The anchor's width, when the layer matches it. */\n    width: number | undefined;\n}\n\nconst OPPOSITE: Record<AnchorSide, AnchorSide> = {\n    top: \"bottom\",\n    bottom: \"top\",\n    left: \"right\",\n    right: \"left\",\n};\n\n/** Distance kept between a floating layer and the viewport edge, in px. */\nexport const ANCHOR_VIEWPORT_MARGIN = 8;\n\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\nfunction mainAxis(geometry: AnchorGeometry, side: AnchorSide): number {\n    const { anchor, width, height, offset } = geometry;\n    switch (side) {\n        case \"top\":\n            return anchor.top - offset - height;\n        case \"bottom\":\n            return anchor.top + anchor.height + offset;\n        case \"left\":\n            return anchor.left - offset - width;\n        case \"right\":\n        default:\n            return anchor.left + anchor.width + offset;\n    }\n}\n\nfunction fits(geometry: AnchorGeometry, side: AnchorSide): boolean {\n    const { width, height, viewportWidth, viewportHeight, margin } = geometry;\n    const start = mainAxis(geometry, side);\n    const size = side === \"top\" || side === \"bottom\" ? height : width;\n    const limit = side === \"top\" || side === \"bottom\" ? viewportHeight : viewportWidth;\n    return start >= margin && start + size <= limit - margin;\n}\n\nfunction crossAxis(start: number, length: number, size: number, align: AnchorAlign): number {\n    if (align === \"start\") return start;\n    if (align === \"end\") return start + length - size;\n    return start + (length - size) / 2;\n}\n\n/**\n * Place a floating layer next to its anchor, inside the viewport.\n *\n * The requested side wins when the layer fits there. When it does not and the\n * opposite side does, the layer flips — the case that matters is the action menu\n * of the last row of a table near the bottom of the screen, which would otherwise\n * open below the fold. When neither side fits, the requested one is kept and the\n * layer is clamped, because a partially visible menu the user can scroll to beats\n * one that jumps sides depending on a pixel.\n *\n * Both axes are then clamped to the viewport minus `margin`.\n *\n * @param geometry - The anchor box, the floating layer's size, the viewport, and\n * the requested placement.\n * @returns The viewport coordinates for a `position: fixed` layer, and the side\n * that was used after flipping.\n */\nexport function computeAnchorPosition(geometry: AnchorGeometry): AnchorPlacement {\n    const { anchor, width, height, viewportWidth, viewportHeight, align, margin } = geometry;\n    const requested = geometry.side;\n    const flipped = OPPOSITE[requested];\n    const side = !fits(geometry, requested) && fits(geometry, flipped) ? flipped : requested;\n    const vertical = side === \"top\" || side === \"bottom\";\n    const main = mainAxis(geometry, side);\n    const top = vertical ? main : crossAxis(anchor.top, anchor.height, height, align);\n    const left = vertical ? crossAxis(anchor.left, anchor.width, width, align) : main;\n    return {\n        top: clamp(top, margin, viewportHeight - height - margin),\n        left: clamp(left, margin, viewportWidth - width - margin),\n        side,\n    };\n}\n\n/** Options of {@link useAnchorPosition}. */\nexport interface AnchorPositionOptions {\n    /** Element the layer is anchored to. */\n    anchor: HTMLElement | null;\n    /** The floating layer itself, once mounted. */\n    floating: HTMLElement | null;\n    side: AnchorSide;\n    align: AnchorAlign;\n    /** Gap between anchor and layer, in px. */\n    offset: number;\n    /** When false the hook does nothing and returns `undefined`. */\n    enabled: boolean;\n    /**\n     * Give the layer the anchor's width — a listbox under its input. Default\n     * `false`.\n     */\n    matchWidth?: boolean;\n}\n\n/**\n * Keep a portalled layer glued to its anchor.\n *\n * Takes the floating element as a value rather than a ref, because `Portal`\n * renders `null` on its first pass and mounts in an effect: a layout effect keyed\n * off `open` would run while the layer does not exist and measure nothing. With\n * the node held in state (a callback ref), the effect runs on the render that has\n * it, and `useLayoutEffect` settles the position before the first paint.\n *\n * The size comes from `offsetWidth`/`offsetHeight`, not from\n * `getBoundingClientRect`, which reports the transformed box — the layers enter\n * with a `translate`/`scale` animation, and the transformed rect would place them\n * a few pixels off. The anchor's rect is the right one to read: it is where the\n * trigger is painted.\n *\n * Scroll (captured, so a scrolling table wrapper counts) and resize reposition the\n * layer on the next animation frame, so a menu open inside a table that scrolls\n * follows its row instead of floating where the row used to be. So does a change\n * in the size of either box, through a `ResizeObserver`: a combobox list flipped\n * above its input shrinks as the user types, and a multi-select field grows a\n * line as chips are added — without the observer the list would keep its old\n * top and float away from the field, or cover it.\n *\n * With `matchWidth` the anchor's width is written to the layer **before** its\n * height is read, so the height is measured at the width it will be painted at —\n * a list whose options wrap at the narrower width is taller.\n *\n * The unmeasured first pass is **not** hidden with `visibility: hidden`: an\n * element under it cannot take focus, and the menu's focus effect runs before\n * the measured re-render, so the first entry silently kept no focus (measured in\n * Chrome; jsdom does not enforce it). Nothing is painted at the unmeasured\n * position anyway — the layout effect re-renders before the browser paints.\n *\n * @param options - Anchor, floating node, placement, and whether it is active.\n * @returns A `position: fixed` style for the layer, or `undefined` when disabled.\n */\nexport function useAnchorPosition({\n    anchor,\n    floating,\n    side,\n    align,\n    offset,\n    enabled,\n    matchWidth = false,\n}: AnchorPositionOptions): CSSProperties | undefined {\n    const [placement, setPlacement] = useState<MeasuredPlacement | null>(null);\n\n    useLayoutEffect(() => {\n        if (!enabled || !anchor || !floating) {\n            setPlacement(null);\n            return;\n        }\n        const update = (): void => {\n            const rect = anchor.getBoundingClientRect();\n            const width = matchWidth ? rect.width : undefined;\n            if (width !== undefined) floating.style.setProperty(\"width\", `${width}px`);\n            const position = computeAnchorPosition({\n                anchor: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n                width: floating.offsetWidth,\n                height: floating.offsetHeight,\n                viewportWidth: window.innerWidth,\n                viewportHeight: window.innerHeight,\n                side,\n                align,\n                offset,\n                margin: ANCHOR_VIEWPORT_MARGIN,\n            });\n            const next: MeasuredPlacement = { ...position, width };\n            setPlacement((current) =>\n                current &&\n                current.top === next.top &&\n                current.left === next.left &&\n                current.side === next.side &&\n                current.width === next.width\n                    ? current\n                    : next,\n            );\n        };\n        update();\n        let frame = 0;\n        const schedule = (): void => {\n            if (frame !== 0) return;\n            frame = requestAnimationFrame(() => {\n                frame = 0;\n                update();\n            });\n        };\n        window.addEventListener(\"scroll\", schedule, { capture: true, passive: true });\n        window.addEventListener(\"resize\", schedule);\n        const observer =\n            typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(schedule);\n        observer?.observe(floating);\n        observer?.observe(anchor);\n        return () => {\n            observer?.disconnect();\n            if (frame !== 0) cancelAnimationFrame(frame);\n            window.removeEventListener(\"scroll\", schedule, { capture: true });\n            window.removeEventListener(\"resize\", schedule);\n        };\n    }, [enabled, anchor, floating, side, align, offset, matchWidth]);\n\n    if (!enabled) return undefined;\n    return {\n        position: \"fixed\",\n        top: placement?.top ?? 0,\n        left: placement?.left ?? 0,\n        width: placement?.width,\n    };\n}\n"],"mappings":"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"}
+{"version":3,"file":"anchor-position.js","names":["OPPOSITE","clamp","min","value","max","mainAxis","geometry","side","anchor","offset","height","width","fits","start","size","limit","viewportHeight","viewportWidth","margin","crossAxis","align","length","computeAnchorPosition","requested","flipped","vertical","main","top","left","useAnchorPosition","placement","setPlacement","useState","useLayoutEffect","enabled","floating","update","rect","matchWidth","next","current","frame","schedule","observer"],"sources":["../../../src/components/Portal/anchor-position.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { CSSProperties } from \"react\";\n\n/** Side of the anchor a floating layer is placed on. */\nexport type AnchorSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\n/** Alignment of the floating layer along the anchor's edge. */\nexport type AnchorAlign = \"start\" | \"center\" | \"end\";\n\n/** The viewport-relative box a placement is computed from. */\nexport interface AnchorRect {\n    top: number;\n    left: number;\n    width: number;\n    height: number;\n}\n\n/** Everything {@link computeAnchorPosition} needs, all in CSS pixels. */\nexport interface AnchorGeometry {\n    anchor: AnchorRect;\n    width: number;\n    height: number;\n    viewportWidth: number;\n    viewportHeight: number;\n    side: AnchorSide;\n    align: AnchorAlign;\n    offset: number;\n    margin: number;\n}\n\n/** A resolved placement: viewport coordinates plus the side actually used. */\nexport interface AnchorPlacement {\n    top: number;\n    left: number;\n    side: AnchorSide;\n}\n\n/** What {@link useAnchorPosition} keeps between measurements. */\ninterface MeasuredPlacement extends AnchorPlacement {\n    /** The anchor's width, when the layer matches it. */\n    width: number | undefined;\n}\n\nconst OPPOSITE: Record<AnchorSide, AnchorSide> = {\n    top: \"bottom\",\n    bottom: \"top\",\n    left: \"right\",\n    right: \"left\",\n};\n\n/** Distance kept between a floating layer and the viewport edge, in px. */\nexport const ANCHOR_VIEWPORT_MARGIN = 8;\n\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.max(min, Math.min(value, Math.max(min, max)));\n}\n\nfunction mainAxis(geometry: AnchorGeometry, side: AnchorSide): number {\n    const { anchor, width, height, offset } = geometry;\n    switch (side) {\n        case \"top\":\n            return anchor.top - offset - height;\n        case \"bottom\":\n            return anchor.top + anchor.height + offset;\n        case \"left\":\n            return anchor.left - offset - width;\n        case \"right\":\n        default:\n            return anchor.left + anchor.width + offset;\n    }\n}\n\nfunction fits(geometry: AnchorGeometry, side: AnchorSide): boolean {\n    const { width, height, viewportWidth, viewportHeight, margin } = geometry;\n    const start = mainAxis(geometry, side);\n    const size = side === \"top\" || side === \"bottom\" ? height : width;\n    const limit = side === \"top\" || side === \"bottom\" ? viewportHeight : viewportWidth;\n    return start >= margin && start + size <= limit - margin;\n}\n\nfunction crossAxis(start: number, length: number, size: number, align: AnchorAlign): number {\n    if (align === \"start\") return start;\n    if (align === \"end\") return start + length - size;\n    return start + (length - size) / 2;\n}\n\n/**\n * Place a floating layer next to its anchor, inside the viewport.\n *\n * The requested side wins when the layer fits there. When it does not and the\n * opposite side does, the layer flips — the case that matters is the action menu\n * of the last row of a table near the bottom of the screen, which would otherwise\n * open below the fold. When neither side fits, the requested one is kept and the\n * layer is clamped, because a partially visible menu the user can scroll to beats\n * one that jumps sides depending on a pixel.\n *\n * Both axes are then clamped to the viewport minus `margin`.\n *\n * @param geometry - The anchor box, the floating layer's size, the viewport, and\n * the requested placement.\n * @returns The viewport coordinates for a `position: fixed` layer, and the side\n * that was used after flipping.\n */\nexport function computeAnchorPosition(geometry: AnchorGeometry): AnchorPlacement {\n    const { anchor, width, height, viewportWidth, viewportHeight, align, margin } = geometry;\n    const requested = geometry.side;\n    const flipped = OPPOSITE[requested];\n    const side = !fits(geometry, requested) && fits(geometry, flipped) ? flipped : requested;\n    const vertical = side === \"top\" || side === \"bottom\";\n    const main = mainAxis(geometry, side);\n    const top = vertical ? main : crossAxis(anchor.top, anchor.height, height, align);\n    const left = vertical ? crossAxis(anchor.left, anchor.width, width, align) : main;\n    return {\n        top: clamp(top, margin, viewportHeight - height - margin),\n        left: clamp(left, margin, viewportWidth - width - margin),\n        side,\n    };\n}\n\n/** Options of {@link useAnchorPosition}. */\nexport interface AnchorPositionOptions {\n    /** Element the layer is anchored to. */\n    anchor: HTMLElement | null;\n    /** The floating layer itself, once mounted. */\n    floating: HTMLElement | null;\n    side: AnchorSide;\n    align: AnchorAlign;\n    /** Gap between anchor and layer, in px. */\n    offset: number;\n    /** When false the hook does nothing and returns `undefined`. */\n    enabled: boolean;\n    /**\n     * Give the layer the anchor's width — a listbox under its input. Default\n     * `false`.\n     */\n    matchWidth?: boolean;\n}\n\n/**\n * Keep a portalled layer glued to its anchor.\n *\n * Takes the floating element as a value rather than a ref, because `Portal`\n * renders `null` on its first pass and mounts in an effect: a layout effect keyed\n * off `open` would run while the layer does not exist and measure nothing. With\n * the node held in state (a callback ref), the effect runs on the render that has\n * it, and `useLayoutEffect` settles the position before the first paint.\n *\n * The size comes from `offsetWidth`/`offsetHeight`, not from\n * `getBoundingClientRect`, which reports the transformed box — the layers enter\n * with a `translate`/`scale` animation, and the transformed rect would place them\n * a few pixels off. The anchor's rect is the right one to read: it is where the\n * trigger is painted.\n *\n * Scroll (captured, so a scrolling table wrapper counts) and resize reposition the\n * layer on the next animation frame, so a menu open inside a table that scrolls\n * follows its row instead of floating where the row used to be. So does a change\n * in the size of either box, through a `ResizeObserver`: a combobox list flipped\n * above its input shrinks as the user types, and a multi-select field grows a\n * line as chips are added — without the observer the list would keep its old\n * top and float away from the field, or cover it.\n *\n * With `matchWidth` the anchor's width is written to the layer **before** its\n * height is read, so the height is measured at the width it will be painted at —\n * a list whose options wrap at the narrower width is taller.\n *\n * The unmeasured first pass is **not** hidden with `visibility: hidden`: an\n * element under it cannot take focus, and the menu's focus effect runs before\n * the measured re-render, so the first entry silently kept no focus (measured in\n * Chrome; jsdom does not enforce it). Nothing is painted at the unmeasured\n * position anyway — the layout effect re-renders before the browser paints.\n *\n * @param options - Anchor, floating node, placement, and whether it is active.\n * @returns A `position: fixed` style for the layer, or `undefined` when disabled.\n */\nexport function useAnchorPosition({\n    anchor,\n    floating,\n    side,\n    align,\n    offset,\n    enabled,\n    matchWidth = false,\n}: AnchorPositionOptions): CSSProperties | undefined {\n    const [placement, setPlacement] = useState<MeasuredPlacement | null>(null);\n\n    useLayoutEffect(() => {\n        if (!enabled || !anchor || !floating) {\n            setPlacement(null);\n            return;\n        }\n        const update = (): void => {\n            const rect = anchor.getBoundingClientRect();\n            const width = matchWidth ? rect.width : undefined;\n            if (width !== undefined) floating.style.setProperty(\"width\", `${width}px`);\n            const position = computeAnchorPosition({\n                anchor: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },\n                width: floating.offsetWidth,\n                height: floating.offsetHeight,\n                viewportWidth: window.innerWidth,\n                viewportHeight: window.innerHeight,\n                side,\n                align,\n                offset,\n                margin: ANCHOR_VIEWPORT_MARGIN,\n            });\n            const next: MeasuredPlacement = { ...position, width };\n            setPlacement((current) =>\n                current &&\n                current.top === next.top &&\n                current.left === next.left &&\n                current.side === next.side &&\n                current.width === next.width\n                    ? current\n                    : next,\n            );\n        };\n        update();\n        let frame = 0;\n        const schedule = (): void => {\n            if (frame !== 0) return;\n            frame = requestAnimationFrame(() => {\n                frame = 0;\n                update();\n            });\n        };\n        window.addEventListener(\"scroll\", schedule, { capture: true, passive: true });\n        window.addEventListener(\"resize\", schedule);\n        const observer =\n            typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(schedule);\n        observer?.observe(floating);\n        observer?.observe(anchor);\n        return () => {\n            observer?.disconnect();\n            if (frame !== 0) cancelAnimationFrame(frame);\n            window.removeEventListener(\"scroll\", schedule, { capture: true });\n            window.removeEventListener(\"resize\", schedule);\n        };\n    }, [enabled, anchor, floating, side, align, offset, matchWidth]);\n\n    if (!enabled) return undefined;\n    return {\n        position: \"fixed\",\n        top: placement?.top ?? 0,\n        left: placement?.left ?? 0,\n        width: placement?.width,\n    };\n}\n"],"mappings":"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"}